How can I force browser to render <div class="child-above"> above <header>.
In my styles there is a collision between translate3d and z-index properties.
Theoretically it's enough just to remove translate3d from .wrapper-scroll, but I can't because it's property set by Smooth Scrollbar which I use on my website.
I tried the solutions proposed here, but either I did something wrong, or it simply doesn't work.
How can I place .child-above above header not removing translate3d property and keeping .child-above inside .wrapper-scroll ?
header{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 40px;
background: #000;
color: #fff;
z-index: 100;
}
#wrapper{
position: relative;
}
.wrapper-scroll{
transform: translate3d(0,0,0);
}
.child-above{
position: absolute;
top: 0;
left: 0;
display: block;
width: 200px;
height: 200px;
background: #555;
z-index: 9999;
padding: 16px 10px;
color: red;
}<header>HEADER</header>
<div id="wrapper">
<div class="wrapper-scroll">
<div class="child-above">CHILD TO BE ABOVE HEADER</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis recusandae, tenetur assumenda sequi quos voluptates voluptatum voluptas. Officia quisquam eveniet totam reprehenderit vel neque est dolorem assumenda in voluptatem. Ab accusantium provident, ut, obcaecati sapiente vitae officia. Distinctio assumenda ex deserunt iusto tempore optio, mollitia amet quas! Aut, magni, repellendus.</p>
</div>
</div>This has nothing to do with transforms - just add a z-index of greater than your header to #wrapper
But I feel like I'm missing something from your question...
header{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 40px;
background: #000;
color: #fff;
z-index: 100;
}
#wrapper{
position: relative;
z-index:101;
}
.wrapper-scroll{
transform: translate3d(0,0,0);
position: relative;
z-index: 101;
}
.child-above{
position: absolute;
top: 0;
left: 0;
display: block;
width: 200px;
height: 200px;
background: #555;
z-index: 9999;
padding: 16px 10px;
color: red;
}<header>HEADER</header>
<div id="wrapper">
<div class="wrapper-scroll">
<div class="child-above">CHILD TO BE ABOVE HEADER</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis recusandae, tenetur assumenda sequi quos voluptates voluptatum voluptas. Officia quisquam eveniet totam reprehenderit vel neque est dolorem assumenda in voluptatem. Ab accusantium provident, ut, obcaecati sapiente vitae officia. Distinctio assumenda ex deserunt iusto tempore optio, mollitia amet quas! Aut, magni, repellendus.</p>
</div>
</div>