warum z Index mit festem und Kind-Elemente nicht funktioniert

Ich versuche, mein Kind Element zur Unterseite der Stapelschicht zu senden, aber in der Ausgabe an der Spitze seines kommenden anstelle des Lade Code https://jsfiddle.net/6qop5vtL/1/warum z Index mit festem und Kind-Elemente nicht funktioniert

hier ist mein Code

.loadermask { 
    position:absolute; 
    z-index: 900; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    background:rgba(0,0,0,0.4); 
} 

.se-pre-con { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    background:url(https://transfast.com/Projects/Transfast.UI/img/loadingimg.gif) center no-repeat; 
}

Quelle

2016-07-20 Divya Sharma

du musst ein wenig genauer sein und Ihre HTML hier zeigen. – Adjit

Ein Kind kann unterhalb eines positionierten Elternelements nicht angezeigt werden. Vielleicht möchten Sie den [stacking context] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) lesen. (Schauen Sie sich das Beispiel an und beobachten Sie DIV # 3) – 4castle

ändern HTML:

<div class="se-pre-con"> 
</div> 
<div class="loadermask"> 
</div>

Wenn loadermask ist ein Kind von se-pre-con, dessen z-Index ist nicht rela Bezug auf das gesamte DOM, relativ zu seinen benachbarten Kindern innerhalb des Elternteils. Der Z-Index eines Kindes ist also nur sein Z-Index innerhalb dieses Elternteils, er kann nicht über oder unter dem Elternteil liegen, weil er innerhalb des Elternteils liegt.

Quelle

2016-07-20 15:51:26

ich brauche mit diesem Div-Format nur –

Dann müssen Sie in alternative Lösungen suchen, die 'z-index' nicht verwenden. Obwohl ich nicht weiß, warum man diese divs in diesem Format "brauchen" würde. –

Wenn Sie versuchen, den grauen Hintergrund hinter das Ladebild zu bekommen, brauchen Sie nicht unbedingt 2 Divs. Sie können es stattdessen kombinieren in einem Hintergrund -

.se-pre-con { 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    background: url(https://transfast.com/Projects/Transfast.UI/img/loadingimg.gif) center no-repeat 
 
       rgba(0, 0, 0, 0.4); 
 
}

<div class="se-pre-con"></div>

Quelle

2016-07-20 15:51:53 Adjit

Unterstützt in [fast jedem gängigen Browser] (http://caniuse.com/#search=multiple%20backgrounds) – 4castle

warum z Index mit festem und Kind-Elemente nicht funktioniert

Antwort

Verwandte Themen