Unterschied zwischen relativen positioniert Pseudoelement und absolute positioniert Pseudoelement

Question

Betrachten wir die folgenden drei Szenarien:

Szenario eins:

div { 
    width: 100px; 
    height: 100px; 
    background-color: black;  
} 

div:before { 
    content: ""; 
    width: 10px; 
    height: 10px; 
    background-color: darkred; 
    position: relative; 
} 

Szenario zwei:

div { 
    width: 100px; 
    height: 100px; 
    background-color: black;  
} 

div:before { 
    content: ""; 
    width: 10px; 
    height: 10px; 
    background-color: darkred; 
    position: absolute; 
} 

Szenario drei:

div { 
    width: 100px; 
    height: 100px; 
    background-color: black;  
} 

div:before { 
    content: ""; 
    width: 10px; 
    height: 10px; 
    background-color: darkred; 
    display:block; 
    position: relative; 
} 

Szenario Eins (relative Position) zeigt das darkred Pseudoelement nicht. Aber wenn es in position:absolute geändert wird, ist das Pseudoelement sichtbar. Wie in Szenario 3 gezeigt, ist das Element sichtbar, wenn ich eine Eigenschaft display:block zu Szenario 1 (relative Position) hinzugefügt habe.

Warum benötigt die Position relativedisplay:block und absolute nicht?

Answer 1

Eine Pseudoklasse wie :before hat einen Standardwert display CSS-Eigenschaft Wert von inline.

Elemente, die display: inline; und position: relative; sind, sind standardmäßig keine "Blocklevel" -Elemente, und wenn sie keinen Inhalt haben, nehmen sie keine Breite ein. Wenn Sie also nicht display: block; erklären und Sie haben einen leeren Inhalt Erklärung wie content: "";, wird es keine Breite überhaupt in Szenario aufnehmen 1.

Elemente, die position: absolute; sind aus Fluss genommen und sind „Blockebene "Elemente mit einem Standard-CSS-Eigenschaftswert display von block. Aus diesem Grund rendert Szenario 2 das :before Pseudoelement unter Berücksichtigung seiner Breiten- und Höhenangaben.

Szenario 3 ist erfolgreich, da die display-Eigenschaft explizit auf block festgelegt wurde, die die Deklarationen von Breite und Höhe berücksichtigt.

Sie können diese Standardwerte sehen, indem Sie das Element :before in den Web Developer Tools Ihres Browsers überprüfen - siehe den "Elements" Inspektor der Tools.