Working pen

Question

<div class="wrapper">
  <div class="avatar"></div>
  <div class="desc an-all"></div>
</div>
<div class="wrapper">
  <div class="avatar"></div>
  <div class="desc an-all"></div>
</div>

.wrapper{
  position: relative;
  width: 250px;
  height: 150px;
  cursor: pointer;
}

.wrapper:hover .desc{
  opacity: 1;
}

.avatar{
  width: 70px;
  height: 70px;
  background: green;
  position: relative;
  z-index: 30;
}

.desc{
  position: absolute;
  top: 50px;
  left: 0;
  height: 250px;
  width: 100%;
  background: red;
  opacity: 0;
  z-index: 20;
}

.an-all{
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}

我无法弄清楚为什么会这样。我认为父级内部的位置元素只能在父级内部应用，而外部是一个不同的世界。

为什么当我悬停第一个包装div的绿色框时，红色的那个不会覆盖第二个包装div绿色框？当我将鼠标悬停在

时，我希望红色框位于绿色框下方

http://codepen.io/laxmana/pen/txKbF

Answer 1

看看你是否喜欢这个例子：JSFiddle

它使用相同的工作代码，但包装器div放在一个相对父代中，每个代码都有自己的z-index。这就是你可以将一个层叠在另一个上面的方法。在一个现实世界的例子中，div可能不在一起（如工具提示），然后你就不需要额外的父级了。当div在一起并且处于同一级别时，父级是有用的。使用JSFiddle，并尝试不同的内容选项。

在原始示例中，绿色div始终位于顶部的原因，无论其html顺序如何，都是因为红色div是绝对定位的，并且2个包装元素位于父级中的同一级别。

.wrapper {
    position: relative;
    width: 250px;
    height: 150px;
    cursor: pointer;
}
.wrapper:hover .desc {
    opacity: 1;
}
.relative-container {
    position:relative;
}
.top {
    z-index:10;
}
.bottom {
    z-index:9;
}
.avatar {
    width: 70px;
    height: 70px;
    background: green;
    position: relative;
    z-index: 30;
}
.desc {
    position: absolute;
    top: 50px;
    left: 0;
    height: 250px;
    width: 100%;
    background: red;
    opacity: 0;
    z-index: 20;
}
.an-all {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

更新

以下是多个显示示例：内联块div。诀窍是z-index工作，div 需要是兄弟姐妹/彼此处于同一级别（这也适用于其他元素）。行中需要的第一个div go on top获得最高的z-index，而最后一个div获得最低的z-index。

JSFiddle Example

这是一个很好的资源，解释了z-index https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

的详细信息

注意：在第二个JSFiddle中，我在红色“.desc”下拉列表中使用了display：none，并且只有在通过添加display：block; moused时才使它们可见;到“.wrapper：hover .desc”。在您的原始代码中，即使您没有看到红色div，当您将鼠标悬停在其不可见区域上时，也会触发它们显示。通过使用display：none，它们确实不会显示在页面中，因此无法触发悬停状态。诀窍是display：block覆盖了悬停类中的display：none，因此它们会在绿色按钮悬停时显示。

这隐藏了红色的div：

.desc {
    display:none;

仅当绿色div悬停在上方时显示红色div：

.wrapper:hover .desc {
    display:block;

Answer 2

您的z-index需要更改。现在，两个红色框的索引都低于绿色，这就是它出现在第二个绿色框下方的原因。

<强>更新根据您的评论，您希望绿色框既位于avatar类的基础上，又覆盖wrapper下方的相同类。因为您单独使用课程，所以您无法同时执行这两项操作。您可以将wrappers区别开来，以使描述仍然是头像的基础，而不是与较低元素重叠。

<强> CSS

.wrapper{
  position: relative;
  width: 250px;
  height: auto;     /* Set this to auto to keep elements separate from one another */
  cursor: pointer;
}

.wrapper:hover .desc {
  opacity: 1;
}

.avatar{
  width: 70px;
  height: 70px;
  background: green;
  position: relative;
  z-index: 30;
}

.desc{
  position: relative; /* Keep it inside the document flow */
  top:-20px;          /* sets the overlap from the avatar class */
  left: 0;
  height: 250px;
  width: 100%;
  background: red;
  opacity: 0;
  z-index: 20;        /* Displays below the avatar */
}

.an-all{
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}

绝对的位置不会覆盖另一个孩子

2 个答案:

更新

Working pen