div中子元素的Z-index

Question

我目前有两个按钮，它们是容器div的一部分，与另一个容器div重叠。

底部div覆盖顶部div，使按钮无法点击。我似乎无法弄清楚如何使我的按钮可以点击而不给整个顶部容器div一个比底部容器更高的z-index。因为当我这样做时，我将从底部div丢失部分背景。我一直在尝试各种与z-index相关的东西。

也许你们中的任何人都可以帮助我？

以下是热门div的代码：

.banner-slider{
  float: left;
  width: 100%;
  list-style: none;
  height: 1239px;}

.banner{
  height: 1239px;
  position: relative;
  line-height: 1px;
  padding: 0;
  background: #fff;}

.banner ul li{
  height: 1239px;}

.banner-image{
  float: left;
  width: 100%;
  height: 1239px;
  padding-right: 15px;
  padding-left: 15px;}

.banner-image .row{
  height: 100%;
}

.banner-image .table-cell{
  vertical-align: top;
}

.max-banner {
  float: left;
  max-width: 554px;
  width: 100%;
  padding-top: 180px;
}

.banner-content {
  float: left;
  width: 100%;
}

.banner-content h3{
  font-size: 34px;
  line-height: 40px;
  font-weight: 300;
  color: #ce327f;
}

.banner-content p{
  font-size: 35px;
  line-height: 46px;
  color: #000;
  font-weight: 300;
  margin-top: 10px;
}

.banner-content p b{
  font-weight: 900;
}

.banner-btn{
  float: left;
  width: 100%;
  margin-top: 17px;   
}

.banner-btn a:first-child{
  background: #cf327f;
  margin-right: 15px;
}

.banner-btn a:first-child:hover{
  background: #1f1c1d;
}

.banner-btn a{
  display: inline-block;
  font-size: 15px;
  line-height: 16px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 900;
  background: #1f1c1d;
  float: left;
  border-radius: 2px;
  padding: 12px 34px 11px;
  margin-top: 15px;
}

.banner-btn a:hover{
  color: #fff;
  background: #cf327f;
}

.banner-down {
  float: left;
  left: 0;
  margin-top: 0;
  position: absolute;
  top: 100px;
  width: 88px;
  z-index: 99;
}

.banner-down a {
  border: 1px solid #e6e6e6;
  border-radius: 100%;
  display: inline-block;
  height: 88px;
  width: 88px;
  text-align: center;
}

.banner .banner-down .table-cell{
  vertical-align: middle;
}

.banner-down a:hover{
  background: #cf327f;
  border: 1px solid transparent;
}

.banner-down a:hover i{
  color: #fff;
}

.banner-down i {
  color: #cf327f;
  font-size: 42px;
  transition: all 0.2s ease-in 0s;
  -webkit-transition:  all 0.2s ease-in 0s;
  -ms-transition:  all 0.2s ease-in 0s;
  line-height: 42px;
}

.banner .bx-controls-direction{
  display: none;
}

.banner  .bx-pager.bx-default-pager{
  position: absolute;
  right: 20px;
  top: 289px;
  width: 20px;
  padding: 0;
}

.banner  .bx-pager-item:first-child{
  margin: 0;
}

.banner  .bx-pager-item{
  float: right;
  width: 100%;
  margin-top: 7px;
}

.banner  .bx-pager-item a{
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 3px solid #fff;
  border-radius: 100%;
  background: #D8D9DB;
  float: right;
  margin: 0;
}

.banner .bx-pager-item a:hover, .banner  .bx-pager-item a.active{
  background: #D13282!important;
}

<div class="container banner">

  <ul class="banner-slider">
    <li>
      <div class="banner-image" style="background: url(<?php echo get_template_directory_uri(); ?>/images/banner.png) no-repeat center top; background-size: cover">
        <div class="row">
          <div class="table">
            <div class="table-cell">
              <div class="max-banner">
                <div class="banner-content">
                  <h3>Lorem</h3>
                  <P>Lorem</P>

                </div>
                <div class="banner-btn">
                  <a href="#" title="OVER">Lorem</a>
                  <a href="#" title="SPECIALITEITEN">Lorem</a>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </li>       
  </ul>
</div>

以下是底部div的代码：

.onze-section{
  background: url("../images/sap-bg.png") no-repeat left top;
  background-size: 100% 100%;
  min-height: 1368px;
  margin-top: -600px;
  position: relative;
  z-index: 10;
}

.onze-sap{
  position: absolute;
  top: 550px;
  left: 0;
}

.full-section {
  float: left;
  padding-top: 372px;
  width: 100%;
}

.mrg{
  margin: 0 -20px;
}

.full-section .half:first-child{
  margin: 0;
}

.full-section .half{
  width: 50%;
  padding: 0 20px;
  float: right;
  position: relative;
  z-index: 100;
}

.left-max{
  float: left;
  width: 100%;
  max-width: 570px;
}

.left-content {
  float: left;
  padding-top: 81px;
  width: 100%;
}

.left-content h2{
  color: #110c0c;
  font-size: 40px;
  line-height: 46px;
  font-weight: 900;
  margin-bottom: 35px;
}

.margin-none{
  margin-bottom: 0!important;
}

.left-content p {
  color: #110c0c;
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 27px;
  margin-bottom: 30px;
}

.left-content p b{
  font-weight: 900;
  color: #ce327f;
}

.left-bottom{
  float: left;
  width: 100%;
  margin-top: 10px;
}

<div class="container onze-section">

  <div class="onze-sap"><img src="<?php echo get_template_directory_uri(); ?>/images/left-sap.png" alt=""/> </div>
  <div class="social-field">
    <a href="https://twitter.com" target="_blank" title="twitter">
      <img class="twitter" src="<?php echo get_template_directory_uri(); ?>/images/sc1.png" alt=""/>
    </a>
    <a href="https://www.facebook.com/" target="_blank" title="facebook">
      <img class="facebook" src="<?php echo get_template_directory_uri(); ?>/images/sc2.png" alt=""/>
    </a>
    <a href="https://www.linkedin.com/in/" target="_blank" title="linkedin">
      <img class="linkedin" src="<?php echo get_template_directory_uri(); ?>/images/sc3.png" alt=""/>
    </a>
    <a href="mailto:" title="email">
      <img class="mailing" src="<?php echo get_template_directory_uri(); ?>/images/sc5.png" alt=""/>
    </a>
    <a href="<?php echo home_url(); ?>/contact" target="_blank" title="Contact">
      <img class="contact" src="<?php echo get_template_directory_uri(); ?>/images/sc6.png" alt=""/>
    </a>
  </div>
  <div class="row">
    <div class="banner-down" id="scrolldown">
      <a href="#" title="">
        <div class="table">
          <div class="table-cell">
            <i class="fa fa-angle-down"></i>
          </div>
        </div>
      </a>
    </div>

    <div class="full-section">
      <div class="mrg">
        <div class="half ">
          <div class="right-max">
            <div class="right-logo">
              <a href="#" title=""><img src="<?php echo get_template_directory_uri(); ?>/images/lorem.png" alt=""/> </a>
            </div>
            <div class="right-content">
              <h3>lorem</h3>
              <h2>lorem</h2>
            </div>
            <div class="right-box">
              <div class="rh-bx">
                <div class="rh-img">
                  <a href="<?php echo home_url(); ?>/Lorem" title="Lorem"> <img src="<?php echo get_template_directory_uri(); ?>/images/hart.png" alt=""/> </a>
                </div>
                <div class="rh-text">
                  <a href="<?php echo home_url(); ?>/Lorem" title="Lorem">lorem</a>
                </div>
              </div>
              <div class="rh-bx">
                <div class="rh-img">
                  <a href="<?php echo home_url(); ?>/Lorem" title="Lorem"> <img src="<?php echo get_template_directory_uri(); ?>/images/plus.png" alt=""/> </a>
                </div>
                <div class="rh-text">
                  <a href="<?php echo home_url(); ?>/Lorem" title="Lorem">lorem</a>
                </div>
              </div>
              <div class="rh-bx">
                <div class="rh-img">
                  <a href="<?php echo home_url(); ?>/Lorem" title="Lorem"> <img src="<?php echo get_template_directory_uri(); ?>/images/apple.png" alt=""/> </a>
                </div>
                <div class="rh-text">
                  <a href="<?php echo home_url(); ?>/Lorem" title="Lorem">lorem</a>
                </div>
              </div>
              <div class="rh-bx">
                <div class="rh-img">
                  <a href="<?php echo home_url(); ?>/Wellness" title="Lorem"> <img src="<?php echo get_template_directory_uri(); ?>/images/lotas.png" alt=""/> </a>
                </div>
                <div class="rh-text">
                  <a href="<?php echo home_url(); ?>/Wellness" title="Lorem">lorem</a>
                </div>
              </div>
              <div class="rh-bx">
                <div class="rh-img">
                  <a href="<?php echo home_url(); ?>/producten" title="Lorem"> <img src="<?php echo get_template_directory_uri(); ?>/images/cart.png" alt=""/> </a>
                </div>
                <div class="rh-text">
                  <a href="<?php echo home_url(); ?>/producten" title="Lorem">lorem</a>
                </div>
              </div>
              <div class="rh-bx">
                <div class="rh-img">
                  <a href="<?php echo home_url(); ?>/afspraak" title="lorem"> <img src="<?php echo get_template_directory_uri(); ?>/images/clock.png" alt=""/> </a>
                </div>
                <div class="rh-text">
                  <a href="<?php echo home_url(); ?>/afspraak" title="lorem">lorem</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="half">
          <div class="left-max">
            <div class="left-content" id="scrollin">
              <?php the_content(); ?>
            </div>
            <div class="left-bottom">
              <div class="lf-rw">
                <a href="<?php echo home_url(); ?>/afspraak" title="AFSPRAAK MAKEN" class="btn">lorem</a>
              </div>
              <div class="lf-rw">
                <a href="#" title=""><img width="32px" src="<?php echo get_template_directory_uri(); ?>/images/clock.png" alt=""/> </a>
              </div>
              <div class="lf-rw">
                <P>lorem</P>
                <P>lorem</P>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Answer 1

您可以在顶级div上使用css禁用指针事件：

pointer-events: none;

Answer 2

向按钮添加更高的z-index。或者将pointer-events: none放到重叠的div。

这是一个显示所有情况的演示：
https://jsfiddle.net/nu8n16w0/

.cont {
  position: relative;
}

.one {
  background: black;
}

.two {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: white;
  opacity: 0.5;
}

.cont.pe .two{
  pointer-events: none;
}

.cont.zi .one input {
  position: relative;
  z-index: 1;
}

<div class="cont">
<div class="one">
  <input type="button" value="can't be clicked">
</div>
<div class="two"></div>
</div>

<br>

<div class="cont pe">
<div class="one">
  <input type="button" value="can be clicked">
</div>
<div class="two"></div>
</div>

<br>

<div class="cont zi">
<div class="one">
  <input type="button" value="can be clicked and is fully visible">
</div>
<div class="two"></div>
</div>

如果没有发布你遇到问题的html和css，没有人可以帮助你..