使用CSS在div后面制作按鈕

Question

我有一些html包含一些包含在div類中的按鈕。

 .addshade { left: 0; width: 100%; height: 100%; z-index: 100000; background: rgba(0, 0, 0, 0.75); display: block; } .cbutton { cursor: pointer; display: inline-block; font-family: Roboto; font-weight: 700; font-size: 16px; border-radius: 5px; padding: 5px 6px; min-width: 90px; text-decoration: none; -webkit-font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: -1000; } 

 <div class="addshade"> <p class="description"></p> <div class="options"> <a class="buy cbutton whiteonpurple" target="_blank" href="http://www.apple.com/shop/buy-watch/apple-watch">Buy</a> <a class="hint cbutton whiteonblack" target="_blank">Hint</a> </div> <div class="info" style="display: none;"> <div class="bar"></div> <div class="rehints" id="rehint_55cd0ef28ead0e883c8b4567" style="visibility: hidden;">10 REHINTS</div> <div class="hinter" style="visibility: hidden;"> <div class="picture monophoto"> <div class="text" style="font-size: 37px; margin-top: 4.375px;">SO</div> <div class="img" style="background-image: url(http://graph.facebook.com/filler/picture?type=large);" onclick="location.href='/user/filler';"></div> </div> <div class="content"> <div class="one">Hinted by:</div> <div class="two"><a href="/user/sean12oshea">Sean O'Shea</a> </div> </div> </div> <div class="partnertext">Partnered Hint</div> <div style="clear:both;"></div> </div> </div> 

即使使用z-index，按鈕也會顯示在我想要的陰影前面：

但是，按鈕位於前面並且可以點擊。 我如何獲得所需的行為？

Answer 1

z-index僅適用於定位元素（位置：絕對，位置：相對或位置：固定） 。

因此添加position:relative; 到.cbutton

 .addshade { left: 0; width: 100%; height: 100%; z-index: 100000; background: rgba(0, 0, 0, 0.75); display: block; } .cbutton { cursor: pointer; display: inline-block; font-family: Roboto; font-weight: 700; font-size: 16px; border-radius: 5px; padding: 5px 6px; min-width: 90px; text-decoration: none; -webkit-font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: -1000; position: relative; } 

 <div class="addshade"> <p class="description"></p> <div class="options"> <a class="buy cbutton whiteonpurple" target="_blank" href="http://www.apple.com/shop/buy-watch/apple-watch">Buy</a> <a class="hint cbutton whiteonblack" target="_blank">Hint</a> </div> <div class="info" style="display: none;"> <div class="bar"></div> <div class="rehints" id="rehint_55cd0ef28ead0e883c8b4567" style="visibility: hidden;">10 REHINTS</div> <div class="hinter" style="visibility: hidden;"> <div class="picture monophoto"> <div class="text" style="font-size: 37px; margin-top: 4.375px;">SO</div> <div class="img" style="background-image: url(http://graph.facebook.com/filler/picture?type=large);" onclick="location.href='/user/filler';"></div> </div> <div class="content"> <div class="one">Hinted by:</div> <div class="two"><a href="/user/sean12oshea">Sean O'Shea</a> </div> </div> </div> <div class="partnertext">Partnered Hint</div> <div style="clear:both;"></div> </div> </div> 

Answer 2

看到這個小提琴

在這里看到答案 。 它說，

z-index僅適用於定位元素（位置：絕對，位置：相對或位置：固定）。

因此添加

z-index: -1000;
position: relative;

到.cbutton

Answer 3

對於定位框，z-index屬性指定：1）當前堆疊上下文中框的堆棧級別。 2）盒子是否建立了本地堆疊上下文。

Z-index受堆疊環境的影響很大。 我想強調一下

將z-index值定位並分配給HTML元素會創建堆疊上下文

因此，我個人會在兩個元素上使用位置相對，以便將兩者放在相同的堆疊上下文中

.addshade, .cbutton {
    position: relative;
}