sibling stays behind, despite having highter z-index

Question

In the following code first sibling stays behind despite having higher z-index. Why is that?

   
<div style="z-index: 100000000000000000000000000000000000000000;position: fixed;">why its not in front?</div>

<div style="
    height: 110px;
    width: 60px;
    background: red;
    display: block;
    position: fixed;
    z-index: 100000000000000000000000000000000000;
"></div>

because I lke websites with higher z-index – dasfdsa Jul 29 '20 at 15:59 — dasfdsa, Jul 29 '20 at 15:59

score 2 · Answer 1 · answered Jul 29 '20 at 15:50

2

The z-index you're setting is higher than the available range. You'll need to use a value in the available range:

<div style="z-index: 1;position: fixed;">why its not in front?</div>
<div style="
    height: 110px;
    width: 60px;
    background: red;
    display: block;
    position: fixed;
    z-index: 0;
"></div>

answered Jul 29 '20 at 15:50

Mobina

6,369
2
25
41

Can you provide some reference about the available limit? – dasfdsa Jul 29 '20 at 15:51
1

Check this: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index – Mobina Jul 29 '20 at 15:53

sibling stays behind, despite having highter z-index

1 Answers1