CSS make DIV position fixed inside DIV with PERSPECTIVE propertie

Question

i have a problem for getting #fixed with position:fixed relative to #container

check this fiddle out : https://jsfiddle.net/a1zogh

Answer 1

The issue is that the wrapper (the div#container box) around the element of which you want to have a fixed position overrules its effect by the next css property:

perspective: 300px;

This is the culprit. When you check the documentation of it, it mentions the next line:

Using this property with a value different than 0 and none creates a new stacking context. source: MDN - CSS perspective

The use of position: fixed has the same behavior, which leads to conflicts.

fixed Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always create a new stacking context. source: MDN - CSS position

When you remove the above line, you will see that the element is now fixed to the viewport. But that would ruin your parallax background ...

The only solution to solve it is to add an another container on the top of it and use a separate div for your fixed element.

    
this is fixed // why not fixed?
    

        

            ....
        
    

And use the position: fixed rule on your div#fixed.