Question

出于某种原因，按钮在特定HTML标记内部时无法正常工作。即使在以下情况下，也无法点击它们：一个。应用的类与工作的按钮完全相同，b。它们所处的标签也与那些有效的标签完全相同。下面评论的例子：

<header>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
              <h3 class="text-left">The European What?</h3>
              <h4 class="text-left">The European Union</p>
              <p class="text-left">A bunch of important people from different countries gathered and thought it would be productive to work together. So now in Europe there are 28 countries that act like they’re one.</p>
              <!-- This button works -->
              <button class="btn lesson-toc" type="button" data-toggle="modal" data-target="#myModal"><i class="material-icons icon-align">list</i>Table of Contents</button>
            </div>
        </div>
    </div>
</header>
<section id="lesson" style="position:relative;overflow-y:scroll" data-spy="scroll" data-target="#toc">
    <div class="container">
      <div class="row">
        <!-- This button doesn't work -->
        <button class="btn lesson-toc" type="button" data-toggle="modal" data-target="#myModal">
          <i class="material-icons icon-align">list</i>
        </button>
        <div class="col-xs-12 text-center">
          <h5>How was the EU Formed? This is very long.</h5>
        </div>
      </div>
    </div>
    <!-- This button works -->
    <button class="btn lesson-toc" type="button" data-toggle="modal" data-target="#myModal">
      <i class="material-icons icon-align">list</i>
    </button>

Answer 1

我发现.lesson-toc类的CSS属性为position：absolute;并且z-index将它推到其他东西以下，所以它变得无法点击。它只是在那个特定的div中被打破了，因为在其他的中，没有任何更高的z-index值来覆盖它。

为什么按钮在使用相同类的特定div标签之间不起作用？

1 个答案: