Question

我有一个固定的标题，当点击一个按钮时会显示一个孩子。我把它作为悬停在jsfiddle上使其变得更简单，但是如果你这样做，你可以看到孩子在父母之上。我有什么办法可以让它显示出来吗？

另外，我需要父母有z-index Fiddle

＆＃13;

#parent {
  width: 100%;
  height: 50px;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}
#child {
  width: 100%;
  height: 200px;
  background: #000;
  position: absolute;
  top: -200px;
  left: 0;
  z-index: -1;
  transition: 0.2s;
}
#parent:hover #child {
  top: 50px;
}

＆＃13;

<div id="parent">Hover me
  <div id="child">
  </div>
</div>

＆＃13;

Answer 1

你需要在元素周围有一个包装器，这样你就可以使用z-index。请参阅下文或view this JSFiddle。

＆＃13;

#parent {
  width: 100%;
  height: 50px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
}

#child {
  width: 100%;
  height: 200px;
  background: #000;
  position: absolute;
  top: -200px;
  left: 0;
  z-index: -1;
  transition: 0.2s;
}

#parent:hover #child {
  top: 50px;
}

.wrapper {
  z-index:0;
  position:fixed;
  width:100%;
  top:0;
}

＆＃13;

<div class="wrapper">
  <div id="parent">Hover me
    <div id="child">
    </div>
  </div>
</div>

＆＃13;

Answer 2

我遇到过类似的问题，并通过更改一些HTML结构和CSS来解决。我希望它可以帮助你。

在此，我根据您的示例进行了一些更新

＆＃13;

#parent {
  width: 100%;
  height: 50px;
  background: #f00;
  
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

#child {
  width: 100%;
  height: 200px;
  background: #000;
  
  position: absolute;
  top: -200px;
  left: 0;
  z-index: 8;
  
  transition: 0.2s;
}

#parent:hover ~ #child {
  top: 50px;
}

＆＃13;

<div id="parent">Hover me</div>
<div id="child"></div>

＆＃13;

如何让绝对的孩子落后于固定的父母？

2 个答案: