css Transformed child z-index doesn't work

Question

Here's the working example, that reproduces the problem.

I have an overlay div, which is a sibling with the transformed div. I want transformed div's child stacked over the overlay div. Here is some code snippets:

.overlay {
  position:fixed;
  height:100%;
  width:100%;
  background: rgba(0, 0, 0, .5);
  z-index: 2;
  top: 0;
  left: 0;
}
// transformed div
.parent {
  width: 200px;
  height: 200px;
  border: 3px solid violet;
  transform: translate(20px, 50px);
  display: flex;
  position: relative;
}

.child {
  margin: auto;
  width: 50px;
  height: 50px;
  background: yellow;
  z-index: 10; // doesn't work
  position: relative;
}

How can I achieve that?

You are required to show your example markup here, not a third party site that can disappear or change tomorrow helping no one in the future. https://stackoverflow.com/help/mcve — Rob, Jun 11 '17 at 14:17
Possible duplicate of [z-index is canceled by setting transform(rotate)](https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate) — CBroe, Jun 11 '17 at 14:17

score 0 · Answer 1 · answered Jun 11 '17 at 14:33

0

Is there a reason you need to use transform: translate? Using top: 50px; left: 20px; instead will leave the .parent DIV in the same context as the .overlay, allowing you to re-order its .child above the overlay.

answered Jun 11 '17 at 14:33

Bobby Speirs

667
2
7
14

Yep, translate is mandatory in my case. I've creating a simplified example, but in real app I have a draggable grid system. – Sergey Tyupaev Jun 11 '17 at 14:36

css Transformed child z-index doesn't work

1 Answers1