Position Absolute + Scrolling

Position Absolute + Scrolling

You need to wrap the text in a div element and include the absolutely positioned element inside of it.

<div class="container">
    <div class="inner">
        <div class="full-height"></div>
        [Your text here]
    </div>
</div>

Css:

.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }

Setting the inner div's position to relative makes the absolutely position elements inside of it base their position and height on it rather than on the .container div, which has a fixed height. Without the inner, relatively positioned div, the .full-height div will always calculate its dimensions and position based on .container.

* {  box-sizing: border-box;}
.container {  position: relative;  border: solid 1px red;  height: 256px;  width: 256px;  overflow: auto;  float: left;  margin-right: 16px;}
.inner {  position: relative;  height: auto;}
.full-height {  position: absolute;  top: 0;  left: 0;  right: 128px;  bottom: 0;  height: 100%;  background: blue;}

<div class="container">  <div class="full-height">  </div></div>
<div class="container">  <div class="inner">    <div class="full-height">    </div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio    cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate    quidem.  </div></div>

How to use CSS absolute position inside a scrollable div element

You must set position: relative; on the parent div to get the child elements to move in relation to it.

The reality is, you can have the parent div set to any user-defined position, as long as the default static position isn't being used.

Position absolute inside an overflow-x scroll

Wrapping with a scrollable div instead of making the container scrollable will solve your problem. Example with your code :

  <div class="wrap">
   <div class="article"></div>
   <div class="article"></div>
   <div class="article"></div>
   <div class="article"></div>
   <div class="article"></div>
  <div/>

CSS:

.container {
  width: 100vw;
  background-color: red;
  position: relative;
  white-space: nowrap;
}
.wrap {
  overflow: auto;
}

Absolute-positioned div scrolls inside absolute-positioned parent

I resolved by putting the element I wanted to scroll in an absolute-positioned div with overflow-y: scroll like so:

<div class='frame'>
  <div class='fix-me'></div>
  <div class='scroll-me'>
    <div class='long-content'></div>
  </div>
</div>

And styling like this:

.frame {
  background-color: blue;
  position: absolute;
  top: 40px;
  right: 40px;
  left: 40px;
  bottom: 40px;
  overflow-y: hidden;
}

.scroll-me {
  background-color: orange;
  position: absolute;
  top: 40px;
  right: 40px;
  left: 40px;
  bottom: 40px;
  overflow-y: scroll;
}

.fix-me {
  position: absolute;
  z-index: 999;
  top: 40px;
  left: 40px;
  right: 40px;
  height: 56px;
  background-color: purple;
}

.long-content {
  width: 480px;
  background-color: yellow;
  height: 4000px;
  margin: 20px auto;
}

Pen here: https://codepen.io/dustinlocke/pen/vJMzpK

overflow:scroll div with position:absolute element inside

Place the contextual div outside of the overflowing div and position it according to the mouse position.

showContext = function() {    var e = window.event;
    var posX = e.clientX;    var posY = e.clientY;    var context = document.getElementById("contextual")    context.style.top = posY + "px";    context.style.left = posX + "px";    context.style.display = "block";}

.container{  width:200px;  height:100px;  overflow:scroll;  position:relative; /* removing this solves the problem, but .contextual moves to the original position */  z-index:1;}.board{  width:400px;}#contextual{  display:none;  position:absolute;  width:100px;  height:100px;  background-color:grey;  z-index: 2;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="container">    <table class="board">      <tr><td colspan=2>This board size (200) is bigger than its container size (100).</td></tr>      <tr>        <td>this is a button with a contextual element</td>        <td>          <input type="button" value="click me" onclick="javascript:showContext();" />                  </td>      </tr>    </table></div><div id="contextual">This is a contextual help text.</div>

---

Related Topics