当嵌套在Div的内部时，无法点击按钮元素？

时间：2017-07-12 03:59:08

标签： html css button

我有一个button嵌套在3 div内。 div嵌套的最里面的button比其他z-index的{​​{1}}高。div。仍无法点击button。我做错了什么？

* {
  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 个答案:

答案 0 :(得分：1)

请改变    z-index：-50;

任何正值。 然后它会工作

答案 1 :(得分：1)

以下是两种方式：

<强> A） 

body { 
    position: relative;
    z-index: 0;
}

＆＃13;
＆＃13; 
*{
    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;
 }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

或

<强> B） 

#main {
    z-index:0;
    //more code....
}

＆＃13;
＆＃13; 
*{
    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;
 }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

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>

相关问题
最新问题