Wie zur absoluten Position: vor dem Pseudoelement des Kindes relativ zum Elternteil?

Question

Hier ist die fiddle.

Ich habe zwei div-Elemente.

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

und CSS-Code für das.

.parent { 
    height: 20px; 
    width: 100px; 
    background-color: #080; 
    position: relative; 
} 

.child { 
    position: absolute; 
    width: 80px; 
    height: 200px; 
    background-color: #008; 
    right: -10px; 
    top: 30px; 
} 

.child:before { 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #008; 
    border-left: 10px solid transparent; 
    top: -10px; 
    width: 0; 
    height: 0; 
    content: ""; 
    position: absolute; 
    left: 50%; 
} 

Wie .parent ohne JS .child:before Bezug zu positionieren. Ich kenne die Lösung mit .parent:before, aber es ist nicht gut für mich.

Answer 1

Ich denke, das ist, was Sie versuchen zu tun.

Ich denke, dass Sie das robuster und skalierbar finden werden.

.parent { 
 
    height: 20px; 
 
    width: 100px; 
 
    background-color: #080; 
 
    position: relative; 
 
} 
 
.child { 
 
    position: absolute; 
 
    width: 80px; 
 
    height: 200px; 
 
    background-color: #008; 
 
    left: 50%; 
 
    /* note 50% */ 
 
    top: 30px; 
 
    margin-left: -20px; 
 
    /* 2x your arrow size */ 
 
} 
 
.child:before { 
 
    position: absolute; 
 
    border-right: 10px solid transparent; 
 
    border-bottom: 10px solid #008; 
 
    border-left: 10px solid transparent; 
 
    top: -10px; 
 
    /* your border size */ 
 
    margin-left: 10px; 
 
    /* your border-size */ 
 
    width: 0; 
 
    height: 0; 
 
    content: ""; 
 
    left: 0; 
 
}

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

Answer 2

Sie können ein Element absolute nur in Relation zum nächsten übergeordneten Element positionieren. In Ihrem Fall ist das .child.

Wenn .child und .child:before nicht in Ihrem Layout verwendet sind, warum setzt nicht .child:before im Elternelement, entweder als .parent:before oder als eigenes Element?

Alternativ, wenn Ihre Elemente beide feste Breiten wie in Ihrem Beispiel haben, geben Sie dem Pseudo-Element auch eine feste Pixelposition. Demonstration.