html - 使用 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:absolute、position:relative或位置:固定)。

因此将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>