CSS: postion fixed into position absolute

Question

I want to put a fixed position div into an absolute position div. My code doesn't work so how can I make the div .box fixed?

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 90%;
  border: 1px solid black;
  overflow-y: auto;
}

.box {
  position: fixed;
  height: 50px;
  width: 90%;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  border: 1px solid black;
}

<div class="container" align="center">
  <div class="box">This div in fixed position does not stay fixed</div>
  <div style="margin-top: 55px">Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
</div>

score 2 · Accepted Answer · answered Jan 23 '21 at 18:34

Try using position: sticky.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

I changed your code, take a look at the below.

Note: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix. You must also specify at least one of top, right, bottom or left for sticky positioning to work.

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 90%;
  border: 1px solid black;
  overflow-y: auto;
}

.box {
  position: sticky;
  height: 50px;
  width: 100%;
  top: 0;
  border: 1px solid black;
}

<div class="container" align="center">
  <div class="box">This div in fixed position does not stay fixed</div>
  <div style="margin-top: 55px">Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
</div>

score 1 · Answer 2 · answered Jan 23 '21 at 18:36

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 90%;
  border: 1px solid black;
  overflow-y: auto;
}

.box {
  position: sticky;
  height: 50px;
  width: 90%;
  top: 0;
  border: 1px solid black;
  background-color: white;
}

<div class="container" align="center">
  <div class="box">This div in fixed position does not stay fixed</div>
  <div style="margin-top: 55px">Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
</div>

Will this work?

CSS: postion fixed into position absolute

2 Answers2