When I rotate something with css transform
property it placed on the fixed element. In this example when I scroll the page, I want .child
div be on all elements. .two
works fine and goes behind child, but .one
is placed on it.
.parent {
width: 100%;
height: 100%;
}
.child {
position: fixed;
width: 100%;
background-color: blue;
}
.one {
text-align:left;
transform: rotate(2deg);
}
br {
display: block;
line-height: 220px;
}
<div class="parent">
<div class="child">
<p>1</p>
<p>2</p>
</div>
</div>
<p style='height:200px'></p>
<p class="one">ONE</p>
<p class="two">TWO</p>
<p style='height:700px'></p>
.one
goes behind.child
like.two
?