2

我有两个 div，（100 像素 x 100 像素）堆叠在另一个顶部，底部 div 顶部有黑色边框：见小提琴

<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: relativeand来做到这一点z-index（确保div#one高于div#two），然后添加到div#one，参见小提琴- css 因此变为：z-indexmargin-bottom: -1px

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（同时保持负的底部边距），并清除底部的 div（以便它们保持垂直堆叠），那么我不需要使用position: relative或 z-隐藏边框的索引，只要我将负底部边距添加到顶部 div （而不是底部的负顶部边距） - 见小提琴

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

4

1 回答 1

1

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

于 2012-07-30T12:22:44.980 回答