使用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;
}