Why is a fixed pseudo-element blocking clicks on my page?

Question

I recently updated my website to Bootstrap5 and one of the pages is not responding well with the change. I finally traced it back to this css:

body:before {
    content: '';
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    box-shadow: inset 0 0 100px 20px #14BD63;
}

With the CSS in place it's like the button is not recognized. Remove the CSS and rerun and the button works perfectly. What is it about that CSS that's causing this?

html,
body {
  margin: 0;
  padding: 0 0 0 0;
}

body:before {
  content: '';
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  box-shadow: inset 0 0 100px 20px #14BD63;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<!-- Wrapper container -->
<div class="container py-4">

  <!-- Bootstrap 5 starter form -->
  <form id="contactForm">

    <div class="row">
      <div class="col text-center my-auto">
        <button type="button" class="btn btn-outline-info btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="fa fa-calendar"></span>&nbsp;Cohort Year
        </button>
        <ul id="ddCohort" class="dropdown-menu csr_lnk" style="">
          <li>&nbsp;<input type="checkbox" class="d-inline ddCohort" id="inpCohort2026" value="2026" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2026" class="d-inline input small dropdownLabel_NormalFont">2026</label></li>
          <li>&nbsp;<input type="checkbox" class="d-inline ddCohort" id="inpCohort2025" value="2025" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2025" class="d-inline input small dropdownLabel_NormalFont">2025</label></li>
          <li>&nbsp;<input type="checkbox" class="d-inline ddCohort" id="inpCohort2024" value="2024" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2024" class="d-inline input small dropdownLabel_NormalFont">2024</label></li>
          <li>&nbsp;<input type="checkbox" class="d-inline ddCohort" id="inpCohort2023" value="2023" checked="" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2023" class="d-inline input small dropdownLabel_NormalFont">2023</label></li>
          <li>&nbsp;<input type="checkbox" class="d-inline ddCohort" id="inpCohort2022" value="2022" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2022" class="d-inline input small dropdownLabel_NormalFont">2022</label></li>
        </ul>

      </div>
    </div>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

isherwood · Accepted Answer · 2022-08-24T20:42:45.810

Your background overlays the page because of its positioning, which changes its stacking order. One solution is to give it a z-index of -1.

html,
body {
  margin: 0;
  padding: 0 0 0 0;
}

body:before {
  content: '';
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  box-shadow: inset 0 0 100px 20px #14BD63;
  z-index: -1;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<!-- Wrapper container -->
<div class="container py-4">

  <!-- Bootstrap 5 starter form -->
  <form id="contactForm">

    <div class="row">
      <div class="col text-center my-auto">
        <button type="button" class="btn btn-outline-info btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="fa fa-calendar"></span>&nbsp;Cohort Year
        </button>
        <ul id="ddCohort" class="dropdown-menu csr_lnk" style="">
          <li>&nbsp;<input type="checkbox" class="d-inline ddCohort" id="inpCohort2026" value="2026" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2026" class="d-inline input small dropdownLabel_NormalFont">2026</label></li>
          <li>&nbsp;<input type="checkbox" class="d-inline ddCohort" id="inpCohort2025" value="2025" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2025" class="d-inline input small dropdownLabel_NormalFont">2025</label></li>
          <li>&nbsp;<input type="checkbox" class="d-inline ddCohort" id="inpCohort2024" value="2024" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2024" class="d-inline input small dropdownLabel_NormalFont">2024</label></li>
          <li>&nbsp;<input type="checkbox" class="d-inline ddCohort" id="inpCohort2023" value="2023" checked="" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2023" class="d-inline input small dropdownLabel_NormalFont">2023</label></li>
          <li>&nbsp;<input type="checkbox" class="d-inline ddCohort" id="inpCohort2022" value="2022" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2022" class="d-inline input small dropdownLabel_NormalFont">2022</label></li>
        </ul>

      </div>
    </div>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

Why is a fixed pseudo-element blocking clicks on my page?

1 Answers1