3

I have an absolute-positioned div with two children -- an absolute-positioned div and a static div which will scroll inside the parent. It looks like this:

<div class='frame'>
  <div class='absolute-contents'>This should stay put.</div>
  <div class='static-contents'>This should scroll under it.</div>
</div>

And here's the CSS:

.frame {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
  overflow-y: scroll;
}

.absolute-contents {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
  z-index: 9999;
  opacity: .9;
  padding: 40px;
}

.static-contents {
  margin: 24px auto;
  width: 400px;
  height: 3000px;
  padding: 40px;
}

I have the absolute child constrained to the edges of the parent, so why does it still scroll, and how can I make it stay put?

Example: https://codepen.io/anon/pen/wqZxXG

TylerH
  • 20,799
  • 66
  • 75
  • 101
Dustin Locke
  • 121
  • 1
  • 1
  • 6

2 Answers2

8

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

Dustin Locke
  • 121
  • 1
  • 1
  • 6
  • Looks like you got it sorted with extra markup, similar to the question linked in my answer. Nice job! – TylerH Sep 05 '17 at 23:07
5

You should adjust your child div to use position: fixed if you do not want it to move. position: absolute just tells a div that its initial position should be determined absolutely. See my answer here for more info on position: fixed and a similar scenario to yours.

Set the .frame div to position: relative (or a parent of .frame) for this to work. This will set the position: fixed child to be fixed within the position: relative parent of .frame.

You will need to adjust the positioning amounts (top, bottom, left, right) to account for the different stacking contexts.

Something like this: https://codepen.io/anon/pen/brJxVW

body {
  width: 100vw;
}

.frame {
  background-color: green;
  position: relative;
  width: calc(100vw - 80px);
  margin: 0 auto;
  top: 40px;
  bottom: 40px;
  overflow-y: scroll;
}

.absolute-contents {
  background-color: yellow;
  position: fixed;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
  z-index: 9999;
  opacity: .9;
  margin: 40px;
}

.big-contents {
  margin: 24px auto;
  width: 400px;
  height: 3000px;
  background-color: white;
  padding: 40px;
}
<div class='frame'>
    <div class='absolute-contents'>This should stay fixed in the green frame. Why is it scrolling?</div>
    <div class='big-contents'>This should scroll under it.</div>
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
  • Your pen fixes the child div within the entire window, rather than just the `.frame` element and scrolls the whole body. I'd like to scroll only the elements within the green `.frame` and fix the `.absolute-content` within that green `.frame` – Dustin Locke Sep 05 '17 at 20:45
  • @DustinRichardLocke From your demo the .frame was the only thing in the document. I'll make an update when I get home later; adding some surrounding realistic elements to your demo would be helpful for me as well. – TylerH Sep 05 '17 at 20:49