Kevin Powell - Community•4w ago

Position absolute with overflown parent

Hi, I have an element that is positioned top right of the parent absolutely <div className="absolute right-2 top-2">X</div> The parent has overflow-y scrollbars, and when I scroll, the absolute child scrolls with the content, instead of being fixed there, but I cannot use position fixed because it's bound to the viewport, position sticky doesnt work either

3 Replies

croganm•4w ago

Can you share a codepen or a reproducible example?

13eck•4w ago

Usually the issue is that the parent doesn't have position: relative; on it, but like croganm said, without seeing the code we can only guess. So codepen please!

EIO•4w ago

@𝗯𝗼𝗷𝗼. I have experienced that issue when trying to replicate the arrow buttons for the horizontal scroll in the image below. The trick usually is to have a parent element within which you put the scrollable and the buttons as siblings. So, your absolute element isn't going to be positioned against the scrollable element, but on the parent which has a fixed width.

<div class="parent relative">
  <div class="scrollable overflow-x-auto overflow-y-clip" />
  <button class="absolute left" />
  <button class="absolute right" />
</div>

<div class="parent relative">
  <div class="scrollable overflow-x-auto overflow-y-clip" />
  <button class="absolute left" />
  <button class="absolute right" />
</div>

Gaming

Programming

Position absolute with overflown parent

Did you find this page helpful?