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

Question

出于某种原因，按钮在特定 HTML 标记内时不起作用。它们不能被点击，即使在: A。应用的类与起作用的按钮完全相同，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 中被破坏，因为在其他 div 中，没有更高的 z-index 值来覆盖它。