Jak zrobić element potomny wyższy indeks z niż rodzic? [duplikat]

to pytanie ma już odpowiedzi tutaj : Jak sprawić, by element potomny wyświetlał się za (niższy indeks z) niż jego rodzic? (6 odpowiedzi) Zamknięte 1 rok temu.

Załóżmy, że mam ten kod: 

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

Ten jsFiddle: http://jsfiddle.net/ZjXMR/

Teraz muszę mieć <div class="child"> w powyższym <div class="wholePage"> ale w jsFiddle widać, że element potomny renderowany przed <div class="wholePage">.

Jeśli usuniesz parent klasę position lub z-index, Wszystko działa dobrze. To jest prawidłowe zachowanie, którego potrzebuję: http://jsfiddle.net/ZjXMR/1/

Jak mogę to zrobić z {[6] } i bez usuwania czegokolwiek ze strony?

 95
cssz-index
Author: TylerH, 2013-04-17
Source

6 answers

Jest to niemożliwe, ponieważ z-index dziecka jest ustawione na ten sam indeks układania, co jego rodzic.

Rozwiązałeś już problem usuwając z-index z rodzica, zachowaj go w ten sposób lub uczyń element rodzeństwem zamiast dziecka.

 79
Author: Kyle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-01 09:18:25

Nie ma rzeczy niemożliwych. Użyj mocy.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
 9
Author: supermasher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-08 12:18:32

Aby osiągnąć to, co chcesz bez usuwania żadnych stylów, musisz utworzyć indeks z '.rodzic "Klasa większa niż"./ align= "left" / 

.parent {
    position: relative;
    z-index: 4; /*matters since it's sibling to wholePage*/
}

.child {
    position: relative;
    z-index:1; /*doesn't matter */
    background-color: white;
    padding: 5px;
}

JsFiddle: http://jsfiddle.net/ZjXMR/2/

 8
Author: MythThrazz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-17 10:22:58

Podaj rodzic z-index: -1, lub nieprzezroczystość: 0.99

 6
Author: Greg Benner,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-17 11:53:51

Użyj pozycji niestatycznej wraz z większym indeksem z w elemencie potomnym: 

.parent {
    position: absolute
    z-index: 100;
}

.child {
    position: relative;
    z-index: 101;
}
 4
Author: Priyanshu Chauhan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-24 07:12:36

Spróbuj użyć tego kodu, u mnie zadziałało: 

z-index: unset;
 2
Author: Carlos Aleman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-31 03:34:39