Question

我有两个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，就像我一直做的那样？

Answer 1

这是一个跨浏览器问题。最好坚持我认为的第一种方法。

在不使用z-index的情况下，在将div放在另一个上面时观察到偶然的结果

1 个答案: