在Div中嵌套时不能点击按钮元素?

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?

我在3个div里面嵌了一个按钮。按钮被嵌套的最里面的div在所有其他div中有一个较高的z索引。仍然不能单击按钮。我做错了什么?

* {
  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>

3 个解决方案

#1

please change that z-index: -50;

请改变z指数:-50;

to any positive value. Then It will work

任何积极的价值。然后它会工作

#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)

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>

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

按钮是由于#main和#content的负z索引而被body重叠的元素的后代。你可以去掉那些负的z指标。

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>