z-index weird behavior?

Question

Given the example below

function clickme() {
  console.log(' button been clicked')
}

.d1,
.d2 {
  border: 1px solid red;
  z-index: -99;
  opacity: .5;
  position: relative;
}

.d2>button {
  transform: translateY(50px);
}

<div class="d1">
  <button onclick="clickme();">Click Me</button>
</div>
<br>
<div class="d2">
  <button onclick="clickme();">Click Me</button>
</div>

Why when the button moves outside it's parent, it become clickable ?

EDIT:

I used transform: translateY(50px); to move the button, however we can also use position:relative;top:50px; to move the button yet the problem still remains.

`z-index` isn't applied on elements with static (default) positioning. Adding `position: relative;` applies it. As for the transform, see https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate — j08691, Oct 22 '18 at 21:37
it's not necessarily transform to move the element,we can apply `position:relative;top:50px;`to the button and the same would happen — Rainbow, Oct 22 '18 at 21:44
I am pretty sure you know that z-index work with position:relative so you can reduce your question to the outside/inside part : why we can click when it's outside and not inside? — Temani Afif, Oct 22 '18 at 21:44
I figured adding that part would explain the question a bit more. — Rainbow, Oct 22 '18 at 21:45
no, you are focusing on position:relative which not the issue at all .. I suggest you to edit the question so we can understand the main issue and don't focus on z-index and static element — Temani Afif, Oct 22 '18 at 21:47

Temani Afif · Accepted Answer · 2019-03-12T21:03:11.353

Here you are facing a hidden issue and translate/opacity has nothing to do here. When using negative z-index it's like you made your elements to be behind the body (since this one has a z-index set to auto). Then the body height is defined by its in-flow content (both divs) and using translate simply made the element to be placed below the body thus we can reach it and click it.

let's add some border/background to better see the issue:

function clickme() {
  console.log(' button been clicked')
}

.d1,
.d2 {
  border: 1px solid red;
  z-index:-1;
  position: relative;
}

.d2>button {
  transform: translateY(50px);
}

body {
 background:rgba(255,0,0,0.5);
 border:2px solid;
}
html {
  background:blue;
}

<div class="d1">
  <button onclick="clickme();">Click Me</button>
</div>
<br>
<div class="d2">
  <button onclick="clickme();">Click Me</button>
</div>

The body is the red square, all your element are behind it and the button is moved to the bottom and no more covered by the body. The same will also happen if you move your button using other properties without changing the body height.

If you add some height to the body, translate won't change anything as the button will kept behind the body

function clickme() {
  console.log(' button been clicked')
}

.d1,
.d2 {
  border: 1px solid red;
  z-index: -1;
  position: relative;
}

.d2>button {
  transform: translateY(50px);
}

body {
 height:100vh;
}

<div class="d1">
  <button onclick="clickme();">Click Me</button>
</div>
<br>
<div class="d2">
  <button onclick="clickme();">Click Me</button>
</div>

Oh i see, so it's not an outside parent issue but outside the body, make sense. — Rainbow, Oct 22 '18 at 22:07
@ZohirSalak not *outside* but no more covered by the body which is still on the top of alll your elements — Temani Afif, Oct 22 '18 at 22:09

z-index weird behavior?

1 Answers1

Linked