All geek questions in one place

Can't click a button element while nesting inside a Div?

I have buttonnested inside 3 div. The innermost divone where the nested buttonhas the highest of z-indexall the others div. Unable to click 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>
Run codeHide result
+4
source share
3 answers

please change this z-index: -50;

to any positive value. Then it will work

+1
source

Here are two ways:

AND)

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>
Run codeHide result

OR

AT)

#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>
Run codeHide result
+1
source

button , body - z-index #main #content. z-index es.

:

* {
  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>
Hide result
+1

Source: https://habr.com/ru/post/1681238/

More articles:


All Articles