3
我需要<i>元素出现在堆叠顺序中的锚下方，但似乎没有任何效果。建议？为什么z-index：-1在这种情况下工作？
a.button {
background-color: gray;
border-radius: 5px;
color: rgb(247, 247, 247);
display: inline-block;
font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 800;
height: 26px;
line-height: 26px;
padding: 0 12px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
z-index: 1;
}
a.button i {
background: rgb(128, 0, 128);
border-radius: 5px;
border-top-right-radius: 2.5px;
height: 20px;
left: 80%;
position: absolute;
top: 50%;
width: 20px;
z-index: -1;
}<a class="button" href="#"><i></i>Button</a>删除从<a>导致<i>z-index: 1出现下面的父元素：
div.wrapper {
background: pink;
padding: 20px;
}
a.button {
background-color: gray;
border-radius: 5px;
color: rgb(247, 247, 247);
display: inline-block;
font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 800;
height: 26px;
line-height: 26px;
padding: 0 12px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
a.button i {
background: rgb(128, 0, 128);
border-radius: 5px;
border-top-right-radius: 2.5px;
height: 20px;
left: 80%;
position: absolute;
top: 50%;
width: 20px;
z-index: -1;
}<div class="wrapper">
<a class="button" href="#"><i></i>Button</a>
</div>
你不能以任何可靠的方式做到这一点，而无需更改HTML。如果这是一个选择，很好。否则，你的'i'元素的堆栈上下文与'a.button'的堆栈上下文相同，并且不能通过CSS来改变。 –
正如josh提到的，这与您的层次结构和堆叠环境有关。我强烈建议阅读https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index – j08691
@JoshBurgess的整个部分 - 如果您愿意，请随时添加该答案作为答案信用… –