Reference location of a fixed element inside a fixed container

Question

I noticed that if I have a container with position: fixed, and I have an element inside that with also position: fixed, then setting top and left of the inner fixed element will be relative to its fixed parents offset.

However, I cannot find any related material on it. Every documentation which I've found only states the same simple case like a fixed element is positioned relative to the viewport, which seems to be not the case with nested fixed elements.

Example:

div.container {
  position: fixed;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 300px;
  background-color: yellow;
}

div.child {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

<div class="container">
  <div class="child"></div>
</div>

In the example the red child div will be place at the top-left corner of the container DIV, and not at the top-left corner of the viewport.

Could someone please confirm this, and/or point me to some official documentation about this behavior?

UPDATE

It turned out that in this simple case it worked as expected. In my real case the fixed container had an applied transform: translate(50%, 0) rule on it, and that seems to cause the contained fixed elements to take this container as fixed reference.

Is there any kind of workaround or solution to this unexpected behavior?

UPDATE 2

It turned out that my question is an almost exact duplicat of this one: 'transform3d' not working with position: fixed children

Actually I see in a fiddle that in this simple case it works as expected... I got confused now about what the difference can be between this and my real-world case. — Zoltán Tamási, Jun 22 '16 at 13:52
@ZoltánTamási Fixed elements works as this. You can't avoid the normal and correct behaviour. You are searching for appended absolute elements inside a fixed element. `transform` is just a trick but it's not the normal layout. See my answer. — Marcos Pérez Gude, Jun 22 '16 at 14:10

Reference location of a fixed element inside a fixed container

0 Answers0