Geschwister div Teilung Hintergrund von Text mit Position: statische

Question

Zwei Geschwister divs (#one und #two) jeweils mit etwas Text.

Ich bewege #two mit negativen margin-top und würde erwarten, dass es #one zu decken, aber während Text vor #one positioniert wird, ist der Hintergrund des darunter erhalten positioniert.

Dies geschieht nur, wenn #onedisplay:inline-block hat.

div { 
 
    width:110px; 
 
    height:100px; 
 
    font-size:55px; 
 
    font-weight:900; 
 
    text-align:center 
 
} 
 
#one { 
 
    display:inline-block; 
 
    background:yellow; 
 
} 
 
#two { 
 
    background:purple; 
 
    color:pink; 
 
    margin-top:-90px; 
 
    margin-left:20px; 
 
}

<div id='one'>one</div> 
 
<div id='two'>two</div>

fiddle

Wenn jemand könnte eine Erklärung geben würde

---

EDIT geschätzt werden: Ich bin nicht auf der Suche nach einem Workaround, aber ich würde gerne verstehen, wie inline-block Element gerendert wird

Answer 1

So fand ich diese answer, die nicht genau Ihr Szenario folgt, aber es ist in der Nähe und hat gute Informationen. Hauptsächlich diese Elaborate description of Stacking Contexts, dies wird Ihnen sagen, wie HTML Elemente rendert.

Ich normalerweise beheben Sie es durch Einstellung position: relative; auf die beanstandeten Elemente.

div { 
 
    width: 110px; 
 
    height: 100px; 
 
    font-size: 55px; 
 
    font-weight: 900; 
 
    text-align: center 
 
} 
 
#one, #two { 
 
    position: relative; 
 
} 
 
#one { 
 
    display: inline-block; 
 
    background: yellow; 
 
} 
 
#two { 
 
    background: purple; 
 
    color: pink; 
 
    margin-top: -90px; 
 
    margin-left: 20px; 
 
}

<div id='one'>one</div> 
 
<div id='two'>two</div>

Answer 2

div { 
 
    width: 110px; 
 
    height: 100px; 
 
    font-size: 55px; 
 
    font-weight: 900; 
 
    text-align: center 
 
} 
 
#one { 
 
    background: yellow; 
 
    position: relative; 
 
} 
 
#two { 
 
    background: purple; 
 
    color: pink; 
 
    top: 40px; 
 
    left: 40px; 
 
    position: absolute; 
 
}

<div id='one'>one</div> 
 
<div id='two'>two</div>

Answer 3

, wenn Sie ein position: relative und relevante z-index Werte hinzufügen, das funktionieren sollte ...

div { 
 
    width:110px; 
 
    height:100px; 
 
    font-size:55px; 
 
    font-weight:900; 
 
    text-align:center 
 
} 
 
#one { 
 
    display:inline-block; 
 
    background:yellow; 
 
    position: relative; 
 
    z-index:1; 
 
} 
 
#two { 
 
    background:purple; 
 
    color:pink; 
 
    margin-top:-90px; 
 
    margin-left:20px; 
 
    position: relative; 
 
    z-index: 10; 
 
}

<div id='one'>one</div> 
 
<div id='two'>two</div>

Answer 4

Beide Elemente sind in der gleichen Schicht, wie in, sie sind Geschwister. Dies bringt sie auf die gleiche Ebene.Also in der Tat Ihre zwei Schichten sitzen wie folgt aus:

    Text                                       Text
_ _ _ _ _                 _ _ _ _ _

Es wäre sicher davon ausgehen, dass der zweite der beiden Elemente auf dem anderen gestapelt werden würden, also, wenn Sie sie machen beide den gleichen Raum einnehmen, ist es sie zusammen wie diese zusammen~~POS=TRUNC:

    Text                              
        Text
_ _ _ _ _            
        _ _ _ _ _

Welche Art ist wie zwei Decks von Karten und dann schob sie zusammen.

Jetzt ist das alles basiert auf beide ihre Standardanzeigewert von block zu sein, was sie genau das gleiche macht:

div { 
 
    width:110px; 
 
    height:100px; 
 
    font-size:55px; 
 
    font-weight:900; 
 
    text-align:center 
 
} 
 
#one { 
 
    background:yellow; 
 
} 
 
#two { 
 
    background:purple; 
 
    color:pink; 
 
    margin-top:-90px; 
 
    margin-left:20px; 
 
}

<div id='one'>one</div> 
 
<div id='two'>two</div>

Nun, was Sie sehen, ist, wenn Sie Setzen Sie die erste als display:inline-block;.Inline-Elemente werden immer über Block-Elemente angezeigt werden, weil das die Art und Weise ist die Visual Formatting Model Rollen, aber die nur auf das Element angewendet werden, nicht der Textinhalt ist also, warum es angezeigt wird wie:

        Text
    Text                              
_ _ _ _ _            
        _ _ _ _ _

div { 
 
    width:110px; 
 
    height:100px; 
 
    font-size:55px; 
 
    font-weight:900; 
 
    text-align:center 
 
} 
 
#one { 
 
    display:inline-block; 
 
    background:yellow; 
 
} 
 
#two { 
 
    background:purple; 
 
    color:pink; 
 
    margin-top:-90px; 
 
    margin-left:20px; 
 
}

<div id='one'>one</div> 
 
<div id='two'>two</div>

Ich hoffe, das hilft zu verstehen, warum es angezeigt wird, wie es ist. Natürlich, wenn Sie ihre Z-Index wie die drei Personen unten haben, dann können Sie sie wie so auf verschiedenen Ebenen setzen vorgeschlagen ändern:

    Text
_ _ _ _ _
                            Text
                    _ _ _ _ _