Question 43511 in Html Question posted in
Some basic documentation can be found here.

Position absolute div not appearing in front of overflow-y scroll content – Html

Basically, I need the "modal" div to fill the height/width of the .container div no matter where you scroll in the div. For some reason, the .modal div keeps appearing in a stack with the .inner-wrapper div even though it is position absolute.

Why does it not fill the parent .container div?

I’d like to avoid JS, if possible.

I’ve tried playing with the position properties on all the divs involved. I’ve also tried playing with the translate property. I was thinking that display: flex may have something to do with this too, but was proven wrong. My guess is that this issue is related to the overflow-y: scroll.

$(".open-btn").click(function() {
  $(".modal").toggle();
});
.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 2px solid black;
  overflow-y: scroll;
}

.inner-wrapper {
  width: 100%;
  height: 800px;
  background: rgba(34, 34, 12, 0.3);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: flex-end;
}

.open-btn {
  display: block;
  width: 100px;
  height: 30px;
}

.modal {
  display: none;
  width: 90%;
  height: 90%;
  background: green;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="modal"></div>
  <div class="inner-wrapper">
    <button class="open-btn">Open</button>
  </div>
</div>

See Codepen link below for context:
https://codepen.io/nss5161/pen/abaPZvy?editors=1100

Position on Scroll Div Diagram
Multiple Position on Scroll Div Diagram

Tags:

3

Answers


  1. 0

    it will not work in that context. You need to add an inner container as position: absolute will position to the relative parents’ scroll-viewport as that is the actual parent’s boundary.

    Add a simple wrapper inside the container to work as a relative parent:

    .container {
  width: 300px;
  height: 300px;
  border: 2px solid black;
  overflow-y: scroll;
}

.inner-container {
  position: relative;
}

.inner-wrapper {
  width: 100%;
  height: 800px;
  background: rgba(34, 34, 12, 0.3);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: flex-end;
}

.open-btn {
  display: block;
  width: 100px;
  height: 30px;
}

.modal {
  background: green;
  position: absolute;
  inset: 0;
  z-index: -1;
}
    <div class="container">
  <div class="inner-container">
    <div class="modal"></div>
    <div class="inner-wrapper">
      <button class="open-btn">Open</button>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    is it what you expect?

    .container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 2px solid black;
  overflow-y: scroll;
}

.inner-wrapper {
  width: 100%;
  height: 800px;
  background: rgba(34, 34, 12, 0.3);
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: end;
  flex-direction: column;
}

.open-btn {
  display: block;
  width: 100px;
  height: 30px;
  align-self: end;
}

.modal {
  width: 90%;
  aspect-ratio: 1/1;
  background: green;
  position: sticky;
  left: 15px;
  top: 15px;
}
    <div class="container">
  <div class="modal"></div>
  <div class="inner-wrapper">
    <button class="open-btn">Open</button>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    — Edited —

    I hope that’s what you need.

    $(".open-btn").click(function() {
  $(".modal").toggle();
});
    .main {
  width: 300px;
  height: 300px;
  position: relative;
}

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 2px solid black;
  overflow-y: scroll;
}

.inner-wrapper {
  width: 100%;
  height: 800px;
  background: rgba(34, 34, 12, 0.3);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: flex-end;
}

.open-btn {
  display: block;
  width: 100px;
  height: 30px;
}

.modal {
  display: block;
  width: 90%;
  height: 90%;
  background: green;
  position: absolute;
  top: 5%;
  left: 3%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="modal"></div>
  <div class="container">
    <div class="inner-wrapper">
      <button class="open-btn">Open</button>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search