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

Html – Position absolute inside scrollable parent DIV

I have a DIV container and DIV.right with this code. The DIV.right takes place on the right but when the container has overflow-x set to scroll and I scroll — the div scrolls too. I don’t want the right DIV to scroll with the content. How to achieve this?

.container {
  background: #eee;
  position: relative;
  overflow-x: auto;
  height: 100px;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
}
<div class="container">
  <p style="height: 200vh;">Long text to force scrollbars...</p>
  <div class="right">
    Right should not scroll
  </div>
</div>
Tags:

2

Answers


  1. 0

    We can use position:sticky but the order of right div and the p tag will be changed!

    .container {
  background: #eee;
  position: relative;
  overflow-x: auto;
  height: 100px;
}

.right {
  position: sticky;
  top: 0px;
  right: 0px;
  float: right;
}
    Example
<div class="container">
  <div class="right">
    Right should not scroll
  </div>
  <p style="height: 200vh;">Long text to force scrollbars...</p>
</div>
    Login or Signup to reply.
  2. 0

    From what you explain I understand that you want the right div to stay in a fixed place on the page, so you can do this:

    .right{ 
     position: fixed,
     top: 0,
     right: 0,
}

    Position fixed will not move when the page is being scrolled, while absolute will do move since its relative to its parent location (which are moving when scrolling)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search