What happens when nesting elements with position: fixed inside each other?

Admin 1
Viewed 65804

Okay, I've noticed something, but couldn't find it in the CSS spec. Styling an element with position: fixed will position it absolutely, with respect to the browser viewport. What happens if you place a fixed-position element inside another?

Example CSS along the lines of:

.fixed {
  position: fixed;
  width: 100px;
  height: 100px;
  background: red;
}

#parent {
  right 100px;
  padding: 40px;
}

.fixed .fixed {
  background: blue;
}
<div id="parent" class="fixed">
  <div class="fixed"> </div>
</div>

As far as I can tell, the element is fixed-positioned with respect to its nearest parent that's also fixed-positioned. Is this observable in all browsers; also, is it a bug, or intentional behaviour?

So far I've not found anything on this topic, just 'fixed position makes it stick to the page'.

css-position css nested
6 Answers

First element

position: fixed;

And the insider element must be:

position: sticky;

user_38203610

This only occurs when one of the ancestors of an element that uses position: fixed has defined (with a value different that none) any of the following styling rules: filter, transform, perspective, where, in this case, the closest ancestor that matches this condition will be used as the reference for the coordinates of the element instead of the viewport.

From MDN

fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.

This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

user_18241210

Short Answer:

if you have a scrollable element with fixed position (a modal for example), and you want to make one of the childs fixed also(modal close button for example), here is the solution: you can make your element non-scrollable, and instead create a child inside of it and make it scrollable(modal content for example). this way , you can apply position: absolute to the child you want it to be fixed (modal close button for example), instead of position: fixed.

Long Answer:

In my case, i had a display: fixed Modal and applied the overflow: auto to it to make it scrollable. then i wanted to make the close button display: fixed.

Nesting display: fixed worked on chrome, but not in Firefox. so i changed my structure, i removed the overflow: auto from Modal to make it non-scrollable, and instead made the modal content scrollable. and also added position: absolute to close button.

user_47184340
Related