CODEWITHSUNDEEP
htmlcss
Ubi
Ubi

Reputation: 129

Absolute positioning inside scrollable element

I need to make scrollable element with absolute positioned element inside and some big element for scrolling.

.container{
  width: 200px;
  height: 200px;
  position: relative;
  overflow: scroll;
  border: 1px solid red;
}
.content{
  height: 300px;
  background: green;
}
.wtf{
  top: 0px;
  position: absolute;
  height: 10px;
  width: 100%;
  background: red;
}

<div class="container">
  <div class="content">
  </div>
  <div class="wtf"></div>
</div>

http://codepen.io/anon/pen/pvKwvZ In this example I need to keep red element inside of green square after scrolling to bottom.

Upvotes: 0

Views: 456

Answers (1)

lotte-k
lotte-k

Reputation: 168

Your .container is set to position: relative. That's why the .wtf-Element moves along with the .container-Element! The .container becomes the reference object for the .wtf-Element because of the position: relative.

To have the .wtf-Element fixed, your could remove the .container position: relative (or replace it by the default position: static), or ...

another approach would be to set the .wtf position: fixed. Again, this would position the .wtf-Element relative to the "outer html", not relative to the .container.

Upvotes: 2

Related Questions