Can't click on button element when nested inside of Div's? - html

Question

I have a button nested inside of 3 div's. The innermost div where the button is nested has a higher z-index of all the other div's. Still cannot click the button. What am I doing wrong?
* {
font-family: 'Raleway', sans-serif;
}
#main {
background: url('../image/bg2.jpg');
background-size: cover;
background-position: center;
height: 720px;
width: 2000px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: -50px;
position: relative;
z-index: -50;
}
#content {
z-index: -25;
}
#content h3 {
font-size: 8rem;
color: #fff;
}
#button {
z-index: 99999!important;
}
.submain h3 {
display: inline;
padding: 25px;
}
<!--Main-->
<div id="main">
<div id="content">
<h3><i class="fa fa-cogs" aria-hidden="true"></i>DNS<sup>2</sup></a></h3>
<div id="button">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Learn More</button>
</div>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie dignissim lacus id tempus. Donec malesuada efficitur ultricies. Vestibulum nec lobortis est, quis efficitur nunc. Proin finibus, massa in pharetra tempus, velit ante dictum massa,
eget porttitor arcu tellus eu orci. Quisque vitae ante lacus. In tortor purus, tristique nec felis ac, accumsan malesuada risus. Nam consectetur eget lacus vel condimentum. Donec in nisl volutpat, cursus arcu ac, mattis neque. Pellentesque metus
nisi, maximus eget metus sed, tincidunt euismod nisl. Quisque sed ipsum imperdiet, semper quam ac, varius leo.
</div>
</div>
</div>
</div>

Answer 1

please change that
z-index: -50;
to any positive value.
Then It will work

Answer 2

Here is 2 ways :
A)
body {
position: relative;
z-index: 0;
}
*{
font-family: 'Raleway', sans-serif;
}
body { position: relative; z-index: 0; }
#main {
background: url('../image/bg2.jpg');
background-size: cover;
background-position: center;
height: 720px;
width: 2000px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: -50px;
position: relative;
z-index: -50;
}
#content{
z-index: -25;
}
#content h3{
font-size: 8rem;
color: #fff;
}
#button{
z-index: 999!important;
}
.submain h3{
display: inline;
padding: 25px;
}
<div id="main">
<div id="content">
<h3><i class="fa fa-cogs" aria-hidden="true"></i>DNS<sup>2</sup></a></h3>
<div id ="button">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Learn More</button>
</div>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie dignissim lacus id tempus. Donec malesuada efficitur ultricies. Vestibulum nec lobortis est, quis efficitur nunc. Proin finibus, massa in pharetra tempus, velit ante dictum massa, eget porttitor arcu tellus eu orci. Quisque vitae ante lacus. In tortor purus, tristique nec felis ac, accumsan malesuada risus. Nam consectetur eget lacus vel condimentum. Donec in nisl volutpat, cursus arcu ac, mattis neque. Pellentesque metus nisi, maximus eget metus sed, tincidunt euismod nisl. Quisque sed ipsum imperdiet, semper quam ac, varius leo.
</div>
</div>
</div>
OR
B)
#main {
z-index:0;
//more code....
}
*{
font-family: 'Raleway', sans-serif;
}
#main {
background: url('../image/bg2.jpg');
background-size: cover;
background-position: center;
height: 720px;
width: 2000px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: -50px;
position: relative;
z-index: 0;
}
#content{
z-index: -25;
}
#content h3{
font-size: 8rem;
color: #fff;
}
#button{
z-index: 999!important;
}
.submain h3{
display: inline;
padding: 25px;
}
<div id="main">
<div id="content">
<h3><i class="fa fa-cogs" aria-hidden="true"></i>DNS<sup>2</sup></a></h3>
<div id ="button">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Learn More</button>
</div>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie dignissim lacus id tempus. Donec malesuada efficitur ultricies. Vestibulum nec lobortis est, quis efficitur nunc. Proin finibus, massa in pharetra tempus, velit ante dictum massa, eget porttitor arcu tellus eu orci. Quisque vitae ante lacus. In tortor purus, tristique nec felis ac, accumsan malesuada risus. Nam consectetur eget lacus vel condimentum. Donec in nisl volutpat, cursus arcu ac, mattis neque. Pellentesque metus nisi, maximus eget metus sed, tincidunt euismod nisl. Quisque sed ipsum imperdiet, semper quam ac, varius leo.
</div>
</div>
</div>

Answer 3

button is descendant of elements which are overlapped by body due to negative z-index of #main and #content. You can remove those negative z-indexes.
Demo:
* {
font-family: 'Raleway', sans-serif;
}
#main {
background: url('../image/bg2.jpg');
background-size: cover;
background-position: center;
height: 720px;
width: 2000px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: -50px;
position: relative;
}
#content h3 {
font-size: 8rem;
color: #fff;
}
#button {
z-index: 99999!important;
}
.submain h3 {
display: inline;
padding: 25px;
}
<!--Main-->
<div id="main">
<div id="content">
<h3><i class="fa fa-cogs" aria-hidden="true"></i>DNS<sup>2</sup></a></h3>
<div id="button">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Learn More</button>
</div>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie dignissim lacus id tempus. Donec malesuada efficitur ultricies. Vestibulum nec lobortis est, quis efficitur nunc. Proin finibus, massa in pharetra tempus, velit ante dictum massa,
eget porttitor arcu tellus eu orci. Quisque vitae ante lacus. In tortor purus, tristique nec felis ac, accumsan malesuada risus. Nam consectetur eget lacus vel condimentum. Donec in nisl volutpat, cursus arcu ac, mattis neque. Pellentesque metus
nisi, maximus eget metus sed, tincidunt euismod nisl. Quisque sed ipsum imperdiet, semper quam ac, varius leo.
</div>
</div>
</div>
</div>