Layering using z-index with translate3d

Question

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>

You can't do what you are talking about while, at the same time, keeping `#wrapper` below `header`. There's no "but what if I" - the answer is just plain no. Change your markup. — Adam Jenkins, Aug 23 '17 at 16:29

Adam Jenkins · Accepted Answer · 2017-08-23T16:26:01.367

2

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>

edited Aug 23 '17 at 16:26

answered Aug 23 '17 at 16:04

Adam Jenkins

51,445
11
72
100

It's not a solution for me, cause I want to have `#wrapper` under header, and place only `.child-above` container above it. When you remove `transform: translate3d(0,0,0)` from my snippet then everything is as it should, but I can't remove it :/ – Kuba Aug 23 '17 at 16:22
You're trying to defy the laws of....I don't know the physical world maybe? If you want `#wrapper` to be below `header` and you want `.child-above` to be above `header`, then you simply can't have `.child-above` be a descendent of `#wrapper`. It doesn't make sense. Change your markup. – Adam Jenkins Aug 23 '17 at 16:28
You are wrong It's easy to do with `z-index`, but without translate3d. As long as the wrapper doesn't have z-index property, its children can have any `z-index` and they doesn't restricted by parent `z-index`. Evidence here: https://jsfiddle.net/nmgnm7m7/ As you can see there is right order. above-child>header>rest of wrapper – Kuba Aug 23 '17 at 16:35
`It's easy to do`...as long as we don't follow the requirements you laid out (require translate3d) – Adam Jenkins Aug 23 '17 at 16:39
So people who suggested solutions to the question I mentioned in my post were wrong. Are you sure that there is no solution assuming the use of translate3d? – Kuba Aug 23 '17 at 16:44
You're asking the wrong question - you're saying "I have to use translate3d" (of 0,0,0 no less, I guess you only want to do this to take advantage of hardware acceleration). The question to ask is what **layout** do you want to achieve (I can create the same layout with ten different sets of markup)? If we can't alter your markup AND can't alter some of your CSS, then nobody can help you. – Adam Jenkins Aug 23 '17 at 18:26
I disabled native scrollbars in browser and used Smooth Scrollbar instead. That library uses translate3d and transitions instead of manipulating document.body.scrollTop that makes scrolling much smoother. This means that since I want to scroll my content it must be wrapped by container with `transform: transition3d` property. So to sum up, the easiest thing I can do is to go back to the browser scrollbars. Thanks for help – Kuba Aug 23 '17 at 19:54

Layering using z-index with translate3d

1 Answers1