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

Html – Scrollable container with absolute positioned child

I am trying to make a nested container with absolute position appear above the remaining content.

I have an example code here: https://codepen.io/usedtobemeonce/pen/poGxGbW but the example code is also below:

<div style="width: 200px; background: white; overflow: hidden;">
  <div style="max-height: 200px; overflow-y: auto; position: relative; border: 3px solid purple;">
    <div style="height: 100px; background: blue;">box1</div>
    <div style="height: 100px; background: green;">box2</div>

    <div style="background: yellow; position: relative;">
      <!-- 
              the scrolling should stop at title and the content below should just overflow
              similar to how a dropdown would appear
        -->
      <div>title</div>
      <div style="background: red; height: 400px; overflow: hidden;">
        content that should appear beneath title and overlap everything when it needs more space so the scrolling will stop at title
      </div>
    </div>

  </div>
</div>

The problem is that since the parent is scrollable, that basically allows the inner container that I want to overflow to create more available space inside. I understand that this contradicts with the idea of having a scrollable container, but I am wondering if I can achieve this with CSS.

Tags:

2

Answers


  1. 0

    You could set the width of the title div, which you seem to want to not be shown, to 0. Then, you could use JavaScript to do what you are trying to accomplish, which you haven’t really made clear in your question:

    <div style="width: 200px; background: white; overflow: hidden;">
  <div style="max-height: 200px; overflow-y: auto; position: relative; border: 3px solid purple;">
    <div style="height: 100px; background: blue;">box1</div>
    <div style="height: 100px; background: green;">box2</div>

    <div style="background: yellow; position: relative;">
      <!-- 
              the scrolling should stop at title and the content below should just overflow
              similar to how a dropdown would appear
        -->
      <div id="titleDiv">title</div>
      <div style="background: red; height: 0; overflow: hidden;" id="hiddenDiv">
        set the height to 0, added an id
      </div>
    </div>

  </div>
</div>

    JavaScript:

    titleDiv = document.getElementById("titleDiv")
hiddenDiv = document.getElementById("hiddenDiv")

titleDiv.addEventListener('click', () => {
  hiddenDiv.style.height = "400px" //Or something else you want to do here
})
    Login or Signup to reply.
  2. 0

    If I’m understanding your description correctly, you’re looking for position:sticky.

    I had to separate the yellow "title" block from the red block; setting sticky on the red element made it appear not to work (because the sticky block would be taller than the container). If you want the red portion to also act "sticky" then either don’t set its height, or set a height that fits within the container.

    I also removed a lot of unnecessary position rules, some of which may have been interfering with the effect.

    <div style="max-height: 200px; width: 200px; overflow: scroll ; border: 3px solid purple;">
  <div style="height: 100px; background: blue;">box1</div>
  <div style="height: 100px; background: green;">box2</div>

  <div style="background: yellow; position: sticky; top:0">
    <!-- 
              the scrolling should stop at title and the content below should just overflow
              similar to how a dropdown would appear
        -->
    <div>title</div>
  </div>
  <div style="background: red; height: 400px">
    content that should appear beneath title and overlap everything when it needs more space so the scrolling will stop at title
  </div>
</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search