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

Since you can't have the fixed inside, Why does perspective changes fixed position in CSS?, I suggest you add an extra wrapper for your javascript overlay function.

Since you can't have the fixed inside, Why does perspective changes fixed position in CSS?, just place them outside your container (as in below sample), as I can't see the point adding a second wrapper because the fixed div is relative to the window anyway.

#container {
	width:100%;
	height:100%;
	perspective:300px;
 	perspective-origin:50% 50%;
  overflow-y:scroll;
}

.parallaxBase {
    width:100%; 
    position:absolute; top:200px; left:50%;
    transform:translateZ(0);
  	transform:translateX(-50%);

 }

.parallaxBack {
    height:100vh;
    transform:translateZ(-300px) scale(2);

}

#background {background:red; height:200px; padding-top:100px; }
#content {background:yellow; }
#fixed {background:green; 
  width:100%; height:40px; position:fixed; z-index:1; top: 0; left: 0;
 }

#overlay {
width:200px; height:200px; background:purple;
position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); }

this is fixed // why not fixed?

  

    
 this is parallax
  
  

    

      this is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is content
      this is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is content
    
  


  this is overlay