Z-index on child element in div - html

Question

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">
Lorem
Lorem
</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">
<img src="<?php echo get_template_directory_uri(); ?>/images/lorem.png" alt=""/>
</div>
<div class="right-content">
<h3>lorem</h3>
<h2>lorem</h2>
</div>
<div class="right-box">
<div class="rh-bx">
<div class="rh-img">
<img src="<?php echo get_template_directory_uri(); ?>/images/hart.png" alt=""/>
</div>
<div class="rh-text">
lorem
</div>
</div>
<div class="rh-bx">
<div class="rh-img">
<img src="<?php echo get_template_directory_uri(); ?>/images/plus.png" alt=""/>
</div>
<div class="rh-text">
lorem
</div>
</div>
<div class="rh-bx">
<div class="rh-img">
<img src="<?php echo get_template_directory_uri(); ?>/images/apple.png" alt=""/>
</div>
<div class="rh-text">
lorem
</div>
</div>
<div class="rh-bx">
<div class="rh-img">
<img src="<?php echo get_template_directory_uri(); ?>/images/lotas.png" alt=""/>
</div>
<div class="rh-text">
lorem
</div>
</div>
<div class="rh-bx">
<div class="rh-img">
<img src="<?php echo get_template_directory_uri(); ?>/images/cart.png" alt=""/>
</div>
<div class="rh-text">
lorem
</div>
</div>
<div class="rh-bx">
<div class="rh-img">
<img src="<?php echo get_template_directory_uri(); ?>/images/clock.png" alt=""/>
</div>
<div class="rh-text">
lorem
</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">
lorem
</div>
<div class="lf-rw">
<img width="32px" src="<?php echo get_template_directory_uri(); ?>/images/clock.png" alt=""/>
</div>
<div class="lf-rw">
<P>lorem</P>
<P>lorem</P>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

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

Answer 2

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..