Question

我有3个div垂直排列，1px，重叠边框。当我将鼠标悬停在底部div上时，其整个边框将突出显示。但是，当我将鼠标悬停在顶部或中间div上时，边框的底部会被下方的div遮挡。我怎样才能解决这个问题？我尝试在悬停样式上设置z-index，但它似乎不会强迫div高于其他兄弟姐妹。

＆＃13;

.box {
  border: 1px solid #ccc;
  padding: 0.25em;
  width: 100px;
}
.box:nth-child(2) {
  margin-top: -1px;
}
.box:nth-child(3) {
  margin-top: -2px;
}
.box:hover {
  border-color: #000;
  z-index: 1 !important;
}

＆＃13;

<div class="box">Top</div>
<div class="box">Middle</div>
<div class="box">Bottom</div>

＆＃13;

Answer 1

您需要添加position: relative;才能使z-index正常工作，因为它仅适用于定位元素。

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 2

非常简单，只需将position:relative;添加到.box（z-index上已有hover）即可建立 堆叠上下文要求它以您需要的方式工作。

.box { position: relative; /* rest of the styles */ }

演示 http://jsfiddle.net/L6sysroh/

详细了解stacking context。

重叠边框悬停

2 个答案: