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的整個部分 - 如果您願意，請隨時添加該答案作爲答案信用… –