Stellen Sie absolut positionierte Eltern über dem absolut positionierten Kind dar.

Ich versuche, ein absolut positioniertes Kind hinter seinem absolut positionierten Elternteil erscheinen zu lassen. Der blaue Elternteil sollte über dem roten Kind erscheinen.Stellen Sie absolut positionierte Eltern über dem absolut positionierten Kind dar.

Ich versuchte Einstellung z-index: -1 auf das Kind, aber das macht rot Kind nicht sichtbar.

.container { 
 
    position:relative; 
 
    background-color:grey; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
.parent { 
 
    background-color:blue; 
 
    position:absolute; 
 
    top: 50px; 
 
    left: 10px; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100%; 
 
} 
 
.child { 
 
    position:absolute; 
 
    top:-5px; 
 
    right: 0px; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 100%; 
 
    background-color:red; 
 
}

<div class="container"> 
 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div> 
 
</div>

https://jsfiddle.net/dwil30/mh3qw64x/

Quelle

2017-11-13 Damon Daisley Wilson

Ist es 100% notwendig, dass Sie halten diese Eltern/Kind-Beziehung auf den divs? Es ist viel einfacher, wenn sie Geschwister sind – Matt

ideal ja. weil ich jquery ziehbare auf dem Elternteil verwende, also möchte ich die Eltern/Kindbeziehung in Takt halten. Aber wenn ich zu Geschwistern übergehe, dann muss ich das tun ... –

Könntest du nicht das Beste von beiden bekommen? Erstelle ein Großelternelement, das ziehbar ist und die gleiche Größe wie das Elternelement hat. Eltern und Kind werden dann Geschwister – Scoots

Nun ... es scheint ein wenig hacky, aber seine Ihren Anruf :)

Sie benötigen z-index des container da sonst der Renderer angeben hat keinen "Basiswert", mit dem Sie Ihr Kind vergleichen können.

Hier ist eine Arbeits Geige:

https://jsfiddle.net/cmvwLseo/

Prost

Quelle

2017-11-13 16:20:02 LordMsz

Separate das Kind und Eltern divs so sind sie beide relativ zu einem gemeinsamen „Container“ dann Ihre Logik aktualisieren die positionieren Kind entsprechend und legen Sie die Z-Index-Eigenschaft von jedem.

.container { 
 
    position:relative; 
 
    background-color:grey; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 

 
.parent { 
 
    background-color:blue; 
 
    position:absolute; 
 
    top: 50px; 
 
    left: 10px; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100%; 
 
    z-index:2; 
 
} 
 
.child { 
 
    position:absolute; 
 
    top:50px; 
 
    left: 90px; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 100%; 
 
    background-color:red; 
 
    z-index:1; 
 
}

<div class="container"> 
 
    <div class="parent"> 
 
    </div> 
 
    <div class="child"> 
 
    </div> 
 
</div>

Quelle

2017-11-13 16:21:55

Stellen Sie absolut positionierte Eltern über dem absolut positionierten Kind dar.

Antwort

Verwandte Themen