Fixed position relative to parent container

debugcn Published at Dev

undefinedtoken

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

aniskhan001

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

Collected from the Internet

Please contact [email protected] to delete if infringement.