Question

我有一种感觉，我的堆叠上下文搞砸了，但我无法让这个工作。

我有几个div，z-index正常工作，但是，一个孩子没有合作。

我的HTML看起来像这样：

....
<div id="filters">
    <div class="filter"></div>
    <div class="filter"></div>
    <div class="filter"></div>
    <div class="filter"></div>
    <div class="filter"></div>
    <div class="set">
        <img src="Cat.png">
        <div class="drop">
            <img src="Hammer.png">
            <img src="Cat.png">
            <img src="Bat.png">
        </div>
    </div>
</div>
....

我的CSS看起来像这样：

#filters {
    width: 256px;
    height: 32px;
    text-align: center;
    background: linear-gradient(#147380, #0c454d);
    padding: 0px 0px;
    margin-bottom: 16px;
    border: 1px solid #c8c998;
    border-radius: 6px;
    box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
    position: relative;
    z-index: 1;
}
.filter {
    height: 22px;
    width: 22px;
    border-radius: 28px;
    border: 2px solid #7b7651;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
    margin: 3px 3px;
    display: inline-block;
    position: relative;
    z-index: 4;
}
.set {
    height: 22px;
    width: 20px;
    border-radius: 0px 28px 28px 0px;
    border: 2px solid #7b7651;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
    margin: 3px 0px;
    margin-left: -19px;
    padding: 0px 8px 0px 15px;
    background: #e16006;
    display: inline-block;
    position: relative;
    z-index: 3;
}
.drop {
    position: relative;
    z-index: 2;
    width: 20px;
    padding: 8px 4px 2px 4px;
    top: 2px;
    left: -6px;
    border-radius: 0px 0px 7px 7px;
    border: 2px solid #7b7651;
    border-top: 0px;
    background: #d55801;
}

我要做的是让.drop落后于.set，filter位于.filters后面，但所有.drop都位于.set之上。使用我的代码，除了{{1}}位于{{1}}之外，所有内容都会正确显示。

Answer 1

很抱歉，这是不可能的。子元素的父元素不能低于z-index。

More on that topic

Answer 2

//text code 

 body{
padding:0;
margin:0;
  }
 #filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
    }
   .filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
border:1px solid gold;
    }
    .set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
border:1px solid black;
  }
   .drop {
position: relative;
width: 20px;
padding: 8px 4px 2px 4px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
border:1px solid cyan;
margin-top:-138px;
position: absolute;
right:21px;
transition:all 0.5s linear;
z-index:-1;
   }
    #filters .set:hover .drop{
margin-top:0px;
transition:all 0.5s linear;
   }

z-index不显示父母后面的孩子

2 个答案: