Fixed position relative to parent container

Question

Im trying keep an element fixed within a container but the fixed element seems to be positioning itself according to the screen but not the parent element.

My code :

<div class="relative">
  <div class="absolute">
    <div class="fixed"></div>
  </div>
</div>

Css :

.relative{
  position: relative;
  height:800px;
  width: 400px;
  background: #000;
}

.absolute{
  height:60px;
  width: 60px;
  position: absolute;
  top:0;
  right:0;
  background: #ccc;
  -webkit-transform: translateZ(0); 
}

.fixed{
  height:20px;
  width: 20px;
  background: red;
  position: fixed;
  top:0;
  right:0;
}

I want the red box to be fixed inside the grey box . but now when i scroll the box scrolls and doesnt remains fixed.

See it live : http://codepen.io/undefinedtoken/pen/abhgc

The fixed position pulls the element outside the DOM, and places it relative to the viewport. What do you mean by "I want it to be fixed"?? Should it stay inside the parent?? — GreyRoofPigeon, Aug 27 '14 at 12:27
yes !! Im trying to make a modal popup which has a fixed close button on top right since the content has too much height i thought of making the close button fixed so that if the user scrolls the close button does not scroll away. — undefinedtoken, Aug 27 '14 at 12:29
Then I think that the answer that lpg provides might suit you. — GreyRoofPigeon, Aug 27 '14 at 12:30

score 5 · Accepted Answer · answered Aug 27 '14 at 12:58

The problem here is with the -webkit-transform.

Chrome cannot render position:fixed on elements under a transformation.

Read here

You can try removing the transform from .absolute div and set a margin-left to the .fixed div after calculating it's parents width. in your case it's 40px.

Example:

.absolute{
  height:60px;
  width: 60px;
  position: absolute;
  top:0;
  right:0;
  background: #ccc;
  /* -webkit-transform: translateZ(0);  */
}

.fixed{
  height:20px;
  width: 20px;
  background: red;
  position: fixed;
  margin-left: 40px;
}

JSFiddle DEMO

score 1 · Answer 2 · edited May 23 '17 at 11:50

 height:20px;
 width: 20px;
 background: red;
 position: fixed;
 right:0px;
 /* adjust manually by margin*/
 margin-right: 300px;

read this article

edited

css

    .relative-wrapper {
        background-color:#f00;
        height:500px;
        overflow:scroll;
        width: 220px;
        position: absolute;
        z-index:0;
    }

    .fixed {
      background-color:green;
      width: 180px;
      position: absolute;
      z-index:1;
      margin: 3px 10px 10px;
    }

html

   <div class="relative-wrapper">
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
   </div>
   <div class="fixed">
    Overwrite it the content..
   </div>

can you check the answer now? and can you say whether this is you are looking for? — Punitha Subramani, Aug 27 '14 at 13:00

score 1 · Answer 3 · answered Sep 11 '18 at 20:04

There is a better solution I think, using flexbox also can make the magic of let fixed position in relative to it's parent

.out-container {
  margin-top: 200px;
  width: 100px;
  height: 60px;
  background-color: #ffeb3b;
  position: relative;
  align-items: center;
  overflow: hidden;
  justify-content: center;
  display: inline-flex;
}

.container {
  display: inline-flex;
  background: red;
  flex-direction: row;
  position: relative;
}
.container .inner {
  display: block !important;
  position: fixed;
  width: 200px;
  height: 500px;
  background-color: #00bcd4;
  z-index: 4000 !important;
  color: #FFFFFF;
  margin: 0;
  list-style: none;
  font-size: 1.2rem;
  box-sizing: border-box;
  padding: 15px 15px;
  text-align: left;
  white-space: normal;
  visibility: visible;
}
.container .block {
  background-color: #aeea00;
  border-radius: 3px;
  width: 32px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  position: relative;
  overflow: hidden;
}

<div class="out-container">
 <div class="container">
  <div class="inner">text</div>
  <div class="block"></div>
 </div>
</div>

https://codepen.io/zhenximi/pen/wEmpVB

score 0 · Answer 4 · answered Aug 27 '14 at 12:29

0

Are you sure you don't want the red div to be position:absolute instead of fixed? E.g.

.fixed{
  height:20px;
  width: 20px;
  background: red;
  position: absolute;
  top:0;
  right:0;
}

Demo fiddle: http://jsfiddle.net/lparcerisa/osxo8ysw/

From http://www.w3schools.com/css/css_positioning.asp :

Fixed Positioning

An element with fixed position is positioned relative to the browser window.

It will not move even if the window is scrolled

answered Aug 27 '14 at 12:29

lpg

4,897
1
16
16

Hi, i want the red div to be fixed on the top right itself even if i scroll down. – undefinedtoken Aug 27 '14 at 12:31

Fixed position relative to parent container

4 Answers4