Adding z-index: 1 to main area causes an active modal to sit behind its backdrop

[Nanna]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Adding z-index: 1; to the <main> content area causes an active modal to sit behind its backdrop if a <footer> below is fixed..

The reason I want to add a custom z-index to the main content area, is because I need my content to overflow the footer creating a parallax effect.

Reduced test cases

https://codepen.io/Nanna-Ellegaard/pen/poYKexv

or

<main>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Understood</button>
        </div>
      </div>
    </div>
  </div>
</main>
<footer></footer>

main {
  position: relative;
  z-index: 1;
  margin-bottom: 300px; /* Footer height */
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 300px;
}

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.2

[Julien Déramond]

Thanks for raising this issue @nanna-dk
I haven't checked it in detail yet but wouldn't it be better to declare the modal after the <footer></footer> HTML element, before the </body> so that the z-index handling of the modal doesn't depend of the <main> one? In terms of semantics, I'm not certain that the modal should necessarily be in the <main> HTML element.

[Nanna]

@julien-deramond Yes, that actually works. Thank you.
I will just close this issue, unless you think it should be handled in Bootstrap. ;-)