我有两个div,(100px x 100px)堆叠在另一个上面,底部div在顶部有一个黑色边框:见fiddle
<div id="top"></div>
<div id="bottom"></div>
div {
width: 100px;
height: 100px;
}
#top {
background: tomato;
}
#bottom {
border-top: 1px solid black; background: gold;
}
我想使用顶部div来模糊底部的边框。 (在这种情况下,我无法删除边框)。
通常情况下,我会通过在两个div上设置position: relative
和z-index
来实现此目的(确保 div#one 比 z-index
更高> div#two ),然后将margin-bottom: -1px
添加到 div#one ,请参阅fiddle - 因此css变为:
div {
width: 100px;
height: 100px;
position: relative;
}
#top {
z-index: 9999;
margin-bottom: -1px;
background: tomato;
}
#bottom {
z-index: 1;
border-top: 1px solid black;
background: gold;
}
但是我早些时候搞乱了,并注意到如果我浮动顶部div(同时保持负底部边缘),并清除底部(以便它们保持垂直堆叠),那么我不需要使用position: relative
或z-index隐藏边框,只要我将负底边距添加到顶部div(而不是底部的负顶边距) - 请参阅fiddle
div {
width: 100px;
height: 100px;
}
#top {
float: left;
margin-bottom: -1px;
background: tomato;
}
#bottom {
clear: both;
border-top: 1px solid black;
background: gold;
}
这很好用,我更喜欢它,因为编写的代码较少。那么这里发生了什么?这是一种有效的,跨浏览器的方式将一个事物分层放在另一个上面,还是最好坚持第一种方法,我正在使用z-index,就像我一直做的那样?
答案 0 :(得分:1)
这是一个跨浏览器问题。最好坚持我认为的第一种方法。