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-bubble
margin-bottom:-17%
,而是将top:-100px
添加到.foreground-bubble
,因为它是position:relative
。
我还为包装 div 提供了一个新类“气泡”,并添加了margin-top:50px
以将其进一步向下移动,以免提示与文本冲突。
根据泡泡的提示我改了:
较大三角形的大小 (border-width
)
百分比 -> 像素
(背景气泡)左 -> 右
这是JSFiddle
我还建议您将一些 CSS 组合到新的类中以减少冗余。
例如提示中的border-width
和bottom:100%
。
【讨论】:
维伦丹克卢卡斯! Du bist mein 举行。 :) 这解决了我的问题,而且这些提示在像素方面肯定比百分比更好……我知道它看起来有点古怪。给你加分! 我猜两个关键点是将两个气泡分组到“气泡”类中,并以像素而不是百分比工作。否则,是否有某种原则、教训或我应该使用的操作模式会导致我这样做? 您减少冗余的建议似乎是明智的反馈......我实际上一开始并不知道如何实现它 b/ca)我之前没有同时定义两个类/id 和 b)什么时候我试着考虑一下,我对实际创建“新类”的想法很感兴趣,如果某种条件等,它只会引用伪元素之前/之后……然后我想,为什么我不能只保留旧的分类并一次描述多个类……我该怎么做?……哦,是的,我一直在 Twitter Bootstrap css 中看到它!像魔术一样工作:jsfiddle.net/q4gLw/1 嗯...正如您所说,在大多数情况下,将属于一起的事物分组绝对是一个好主意。此外,您必须小心在 css 中使用百分比。正如您所注意到的,它可能会导致相当多的问题。在大多数情况下,我更喜欢 px 或 em。如果您确实需要它来适应窗口大小(或父元素),只需使用百分比即可。如果您这样做,请务必使用浏览器大小来发现任何奇怪的布局错误。以上是关于HTML5开发-如何实现两个div的重叠的主要内容,如果未能解决你的问题,请参考以下文章
怎样实现两个div并排,并手动拉伸左边DIV宽度的时候,另一边DIV宽度缩小相应宽度。
四个div,单击箭头左右移动,怎么可以实现自动轮播。单击一次移动 一个div??