Is there a way for a child element of a div-A (with a z-index less than div-B) to appear "on top" of div-B?

Asked Jun 19 '20 at 17:51

Active Jun 19 '20 at 21:17

Viewed 42 times

Consider the following example:

<div id="div-B w-100 h-100" style="z-index: 5; position: absolute; top: 0; left: 0">
  //code here
</div>

<div id="div-A" style="z-index: 1;">
  <button style="z-index:500000">Try click</button>
</div>

By the way the z-index works according to the documentation the child element of div-A (button) would have a smaller z-index than div-B because its parent has a smaller z-index.

My question is, is there any way to make the child element (button) be greater than div-A?

edited Jun 19 '20 at 21:17

j08691

204,283
31
260
272

asked Jun 19 '20 at 17:51

Sávio Mendes Miranda

2

No It is not possible, if child has higher z-index(actually it doesn't matter) than it's parent that is when the sibling z-index comes to picture(div-B) in your case, which has high `z-index` and takes precedence. – Manjuboyz Jun 19 '20 at 17:57
Yes, that I already know, my question is whether there is any alternative for this to be possible – Sávio Mendes Miranda Jun 19 '20 at 17:59
1

As @Manjuboyz said, no, it's not possible with your markup. The better question is what are you trying to do? Maybe `z-index` and your current markup needs to change. – disinfor Jun 19 '20 at 18:02
2

@disinfor it's can be possible using transform: https://stackoverflow.com/a/54903621/8620333 (check at the end) – Temani Afif Jun 19 '20 at 19:47
3

@Manjuboyz it's possible: https://jsfiddle.net/yphn75gL/ – Temani Afif Jun 19 '20 at 19:49
@TemaniAfif I stand corrected! I vote to reopen. – disinfor Jun 19 '20 at 19:52
@TemaniAfif what the h*ll !! is `preserve-3D`.. lol thanks for showing that. – Manjuboyz Jun 20 '20 at 13:51

Is there a way for a child element of a div-A (with a z-index less than div-B) to appear "on top" of div-B?

0 Answers0