Reputation: 19

Z-index on child element in div

I currently have two buttons that are part of a container div that is overlapped by another container div.

The bottom div overlays the top div which makes the buttons non-clickable. I can't seem to figure out how to make my buttons clickable without giving the whole top container div a higher z-index then the bottom container. Because when I do this, I will lose part of my background from the bottom div. I've been trying all sorts of stuff related to z-index.

Perhaps any of you can help me out here?

Here's the code for the top 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>

Here's the code for the bottom 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>

Upvotes: 1

Answers (2)

pol

Reputation: 2701

Add higher z-index to the buttons. Or put pointer-events: none to the overlaying div.

Here's a demo showing all situations:
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>

Without posting the html and css you have problem with, nobody can help you further..

Upvotes: 0

Sam Willis

Reputation: 4211

You could disable pointer events with css on the top level div:

pointer-events: none;

Upvotes: 1

Z-index on child element in div

Answers (2)

Related Questions