HTML5开发-如何实现两个div的重叠

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5开发-如何实现两个div的重叠相关的知识,希望对你有一定的参考价值。

参考技术A 在很多情况下都需要实现两个div的重叠(包含层级关系),实现的方法也和div中属性设置的不同也是不一样的,尤其是 position 和 display 的变化.

但是总体上就是对margin( 盒模型 )和top( 定位 )等的运用。margin是属于盒模型中的一部分,修改了margin,就是修改了div元素的大小,但是修改了定位,只是修改了 自己本身的位置 ,不修改元素占用的大小,也不会干扰其他元素的位置。

1. 但是依靠margin来重叠有很大的 局限性 ,图片如下:

这是设置了 黄色div块的margin-top 才实现的,你也可以设置 蓝色div的margin-bottom。 如果你设置黄色div的margin-bottom就不能实现重叠的效果。

2. 当两个div的position为 relative 时,可以同时使用盒模型和定位来实现重叠。使用定位来选择位置时,优先级为top>bottom,left>right,优先级高的会屏蔽低的。

3. 当两个div的position为 absolute 时,那么父元素必须设置一个 定位 属性(不能为默认的static),这样子div才能相对于父div布局。

如何覆盖/重叠两个用 css 设计的 div 看起来像文本气泡?

【中文标题】如何覆盖/重叠两个用 css 设计的 div 看起来像文本气泡?【英文标题】:How to overlay/overlap two div's designed with css to look like text bubbles? 【发布时间】:2014-07-04 15:22:15 【问题描述】:

我的主要问题是如何让前景气泡(蓝色)在所有情况下都略低于背景气泡的右侧?

我尝试过使用不同的方式将对象重叠在一起......特别是使用以下方式:

    玩弄负边距 绝对/相对定位和 z-index

但是,我无法获得一种在“所有条件”下都有效并保持文本气泡“完整”的组合。 (见下文注释)

具体来说,我面临的条件是:

    不同的文本长度 --- 当前写入为“某些标题”的文本是自动生成的,并且可能非常大(即字符数),因此气泡需要调整为不同数量的行 (1-5)。 不同的浏览器尺寸 --- 我希望文本气泡根据浏览器的尺寸进行调整,而不是它们之间的距离。

另请注意:

我正在使用最新版本的 Twitter Bootstrap。 我在文本气泡上使用特定的前后伪元素,因此它们的小提示放置在美观的位置。当我尝试上面的第二种方法来解决问题时,这些经常会搞砸。

如果您可以使文本气泡上的提示看起来更好,则可以加分;)

这是我的html:

           <div>
              <div id="head-names">
                <h2>
                  Person A
                </h2>
                <h2>
                  Person B
                </h2>
              </div>
              <div align="center">
                    <h2 class="text-bubble background-bubble">
                      <p>Some Title</p>
                     </h2>
                    <h2 class="text-bubble foreground-bubble">
                      <p>Some Title</p>
                    </h2>
              </div>
          </div>

还有我的 CSS:

           #head-names 
                display:flex;
                align-items: center;
                justify-content: space-around;
                flex-wrap:wrap;
            

            .text-bubble 
                position:relative;
                text-align : center;    
                border-radius:30px;
                -webkit-border-radius: 30px;
                -moz-border-radius: 30px;
                -webkit-box-shadow: 2px 2px 4px #888;
                -moz-box-shadow: 2px 2px 4px #888;
                box-shadow: 2px 2px 4px #888;
                max-width:650px;
                padding: 10px 20px;
                margin: 0 0 20px;
            


            .text-bubble:before 
                content:"";
                position:absolute;
                width: 0;
                height:0;    
                border-style:solid;
            


            .text-bubble:after 
                content:"";
                position:absolute;
                border-style:solid;    
                display:block;
                width: 0;
            

            .foreground-bubble 
                background-color: #ADD8E6;
                border: 6px solid #666;
                left:2%;   
            

            .foreground-bubble:before 
                bottom:100%;
                left:13%;
                border-color: transparent transparent #666 #666;
                border-width: 30px 30px 30px 30px;
            


            .foreground-bubble:after 
                bottom:100%;
                left:15%;
                border-color: transparent transparent #ADD8E6 #ADD8E6;
                border-width: 18px 18px 18px 18px;    
            

            .background-bubble 
                background-color: #fff;
                border: 6px solid #666;
                left:-2%;
                color:transparent;
                margin-bottom:-17%;
            

            .background-bubble:before 
                bottom:100%;
                left:80%;
                border-color: transparent #666 #666 transparent;
                border-width: 30px 30px 30px 30px;
            

            .background-bubble:after 
                bottom:100%;
                left:82.5%;
                border-color: transparent #fff #fff transparent;
                border-width: 18px 18px 18px 18px;    

我的代码可以在这里找到:http://jsfiddle.net/aZ6bE/

链接到一些线框/示例图像,了解我希望如何缩放:http://ge.tt/2puJ7Hh1/v/0?c

【问题讨论】:

你能添加一张你想要的图片吗? 你的意思是这样的吗? jsfiddle.net/davidpauljunior/kNKX4/19 不,我正在寻找实际上重叠更多的图像。根据您的要求,我添加了一组图片,说明我希望这些对象的理想外观。感谢您的帮助。 也许这可以帮助jsfiddle.net/HGQ25 比较代码时,我发现的唯一区别是 .foreground-bubble:before 的位置从 13% 变为 50px。这是你的意图还是我错过了什么?不幸的是,当浏览器变大时,蓝色前景气泡在白色气泡上方移动的问题(以及随后当浏览器变小时向下太远)仍然存在。此外,foreground-bubble:before 左侧位置的更改也会使其在浏览器调整大小时断开连接。 【参考方案1】:

对于定位,我删除了.background-bubblemargin-bottom:-17%,而是将top:-100px 添加到.foreground-bubble,因为它是position:relative。 我还为包装 div 提供了一个新类“气泡”,并添加了margin-top:50px 以将其进一步向下移动,以免提示与文本冲突。

根据泡泡的提示我改了:

较大三角形的大小 (border-width) 百分比 -> 像素 (背景气泡)左 -> 右

这是JSFiddle

我还建议您将一些 CSS 组合到新的类中以减少冗余。 例如提示中的border-widthbottom:100%

【讨论】:

维伦丹克卢卡斯! Du bist mein 举行。 :) 这解决了我的问题,而且这些提示在像素方面肯定比百分比更好……我知道它看起来有点古怪。给你加分! 我猜两个关键点是将两个气泡分组到“气泡”类中,并以像素而不是百分比工作。否则,是否有某种原则、教训或我应该使用的操作模式会导致我这样做? 您减少冗余的建议似乎是明智的反馈......我实际上一开始并不知道如何实现它 b/ca)我之前没有同时定义两个类/id 和 b)什么时候我试着考虑一下,我对实际创建“新类”的想法很感兴趣,如果某种条件等,它只会引用伪元素之前/之后……然后我想,为什么我不能只保留旧的分类并一次描述多个类……我该怎么做?……哦,是的,我一直在 Twitter Bootstrap css 中看到它!像魔术一样工作:jsfiddle.net/q4gLw/1 嗯...正如您所说,在大多数情况下,将属于一起的事物分组绝对是一个好主意。此外,您必须小心在 css 中使用百分比。正如您所注意到的,它可能会导致相当多的问题。在大多数情况下,我更喜欢 px 或 em。如果您确实需要它来适应窗口大小(或父元素),只需使用百分比即可。如果您这样做,请务必使用浏览器大小来发现任何奇怪的布局错误。

以上是关于HTML5开发-如何实现两个div的重叠的主要内容,如果未能解决你的问题,请参考以下文章

如何让两个div重叠?

HTML里怎么实现div的跳转

怎样实现两个div并排,并手动拉伸左边DIV宽度的时候,另一边DIV宽度缩小相应宽度。

四个div,单击箭头左右移动,怎么可以实现自动轮播。单击一次移动 一个div??

html5 两个canvas重叠放在一个div里面,每个canvas各填充一张图片,代码怎么写?

WPF中如何让一个元素与另一个元素重叠?