html – 使用CSS后面的div后面的按钮

概述我有一些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 我有一些HTML包含一些包含在div类中的按钮.

.addshade {  left: 0;  wIDth: 100%;  height: 100%;  z-index: 100000;  background: rgba(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 >  <p ></p>  <div >    <a  target="_blank" href="http://www.apple.com/shop/buy-watch/apple-watch">Buy</a>    <a  target="_blank">Hint</a>  </div>  <div  >    <div ></div>    <div  ID="rehint_55cd0ef28ead0e883c8b4567" >10 REHINTS</div>    <div  >      <div >        <div  >SO</div>        <div   onclick="location.href='/user/filler';"></div>      </div>      <div >        <div >Hinted by:</div>        <div ><a href="/user/sean12oshea">Sean O'Shea</a>        </div>      </div>    </div>    <div >Partnered Hint</div>    <div ></div>  </div></div>

即使使用z-index,按钮也会显示在我想要的阴影前面：

但是,按钮位于前面并且可以点击.我如何获得所需的行为？

解决方法 z-index仅适用于定位元素(位置：绝对,位置：相对或位置：固定).

因此添加位置：相对;到.cbutton

.addshade {  left: 0;  wIDth: 100%;  height: 100%;  z-index: 100000;  background: rgba(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 >  <p ></p>  <div >    <a  target="_blank" href="http://www.apple.com/shop/buy-watch/apple-watch">Buy</a>    <a  target="_blank">Hint</a>  </div>  <div  >    <div ></div>    <div  ID="rehint_55cd0ef28ead0e883c8b4567" >10 REHINTS</div>    <div  >      <div >        <div  >SO</div>        <div   onclick="location.href='/user/filler';"></div>      </div>      <div >        <div >Hinted by:</div>        <div ><a href="/user/sean12oshea">Sean O'Shea</a>        </div>      </div>    </div>    <div >Partnered Hint</div>    <div ></div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 使用CSS后面的div后面的按钮全部内容，希望文章能够帮你解决html – 使用CSS后面的div后面的按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。