在div后面制作带有CSS的按钮

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索引，按钮也显示在我想要的阴影前面：

​

​

然而，按钮在前面，可点击。我怎样才能得到想要的行为？

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-索引只适用于定位元素(位置:绝对，位置:相对，或位置:固定)。

从而添加

z-index: -1000;
position: relative;

转到.cbutton

Answer 3

对于定位框，z-index属性指定: 1)当前堆叠上下文中框的堆栈级别。( 2)盒子是否建立了一个本地堆叠上下文。

Z-指数受堆叠上下文影响较大.我想强调一下

将z-索引值定位并分配给HTML元素将创建一个堆叠上下文。

因此，我个人认为在这两个元素上都有一个相对位置，以便将两者置于相同的堆叠上下文中。

.addshade, .cbutton {
    position: relative;
}