Pseudo-Elemente in CSS-Gitter positionieren

Ich versuche, Pseudo-Elemente, wie es nach der Spezifikation möglich sein sollte, auf einem Raster zu positionieren. Das funktioniert gut für meinen äußeren Layout, den ich auf <body> eingestellt habe, aber es funktioniert nicht für den <header>, der selbst ein Gitter ist.Pseudo-Elemente in CSS-Gitter positionieren

Wie kann ich den Header nav:after Element in der rechten Spalte des Rasters positionieren? Warum funktioniert es nicht in meinem Beispiel?

Ich freue mich über jede Hilfe! Hier ist der Code:

body { 
 
    display: grid; 
 
    grid-template-columns: 1fr 800px 1fr; 
 
} 
 
header { 
 
    grid-column: 1/4; 
 
    grid-row: 1; 
 

 
    display: grid; 
 
    grid-template-columns: 1fr 800px 1fr; 
 
} 
 

 
/* Works great */ 
 
header:before { 
 
    content: 'Left'; 
 
    grid-column: 1/2; 
 
} 
 

 
/* Doesn't work, treated as a child element */ 
 
header nav:after { 
 
    content: 'Right'; 
 
    grid-column: 3/4; 
 
} 
 
header nav { 
 
    grid-column: 2/3; 
 
}

<body> 
 
    <header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href='#'>Link</a></li> 
 
     <li><a href='#'>Link</a></li> 
 
     <li><a href='#'>Link</a></li> 
 
    </ul> 
 
    </nav> 
 
    </header> 
 
</body>

Thank you!

Quelle

2017-09-05 Sebastian

nav:after ist ein untergeordnetes Element von nav. Machen Sie also Ihre nav ein Gitter - es ist im Moment nicht.

Oder können Sie header:after statt nav:after verwenden - siehe Demo unter:

body { 
 
    display: grid; 
 
    grid-template-columns: 1fr 800px 1fr; 
 
} 
 

 
header { 
 
    grid-column: 1/4; 
 
    grid-row: 1; 
 
    display: grid; 
 
    grid-template-columns: 1fr 800px 1fr; 
 
} 
 

 

 
/* Works great */ 
 

 
header:before { 
 
    content: 'Left'; 
 
    grid-column: 1/2; 
 
} 
 

 

 
/* CHANGED THIS*/ 
 

 
header:after { 
 
    content: 'Right'; 
 
    grid-column: 3/4; 
 
} 
 

 
header nav { 
 
    grid-column: 2/3; 
 
}

<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href='#'>Link</a></li> 
 
     <li><a href='#'>Link</a></li> 
 
     <li><a href='#'>Link</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Quelle

2017-09-05 10:25:18 kukkuz

Hallo kukkuz, danke für deine Antwort! Von dem, was ich in meinem Header-Beispiel sehen kann, ist der Header: bevor Element tatsächlich ein Kind des Körpers ist, sonst wäre ich nicht in der Lage, es auf der linken Seite zu positionieren, würde ich? Ich versuche, das gleiche zu erreichen, ich würde das UL-Element benötigen, um ein: vor oder: nach Pseudo-Element, aber es muss es auf der rechten Seite positionieren. Ich kann jedoch nicht sehen, wie anders diese Situation ist. Warum funktioniert es nicht auf die gleiche Weise? – Sebastian

'header: before' ist ein Kind von' header' ... ': after' und': before' psuedo Elemente sind Kind des Elements, auf das Sie es anwenden ... – kukkuz

Bitte korrigieren Sie mich, wenn ich falsch liege, aber ich denke es ist nicht. Sehen Sie sich das folgende vereinfachte Beispiel an. Wenn ich positionieren kann: vorher auf dem Körpergitter, Header: vorher muss jetzt ein Kind des Körpers sein, ein Geschwisterkopf. Ich denke, das ist was die folgende Spezifikation auch sagt: https: //developer.mozilla.org/de-DE/Firefox/Releases/23 # CSS 'Körper { \t Anzeige: Gitter; \t Raster-Vorlage-Spalten: 1fr 800px 1fr; } Header { \t Gitter-Spalte: 1/4; \t Gitterreihe: 1; } Header: vor { Inhalt: 'Links'; Gitter-Spalte: 1/2; } ''

' – Sebastian

Pseudo-Elemente in einem Gitterbehälter sind Kinder des Behälters betrachtet. Referenzen:

Deshalb, es sei denn ein Pseudoelement absolut positioniert ist, ist es ein Gitterelement. Referenz:

https://www.w3.org/TR/css3-grid-layout/#static-position

Hier ist eine Demonstration auf der Grundlage Ihrer Code:

body { 
 
    display: grid; 
 
    grid-template-columns: 1fr 300px 1fr; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
} 
 

 
body::before { 
 
    content: "pseudo - \a left sibling \a of header"; 
 
    white-space: pre; 
 
    grid-column: 1/2; 
 
    background-color: salmon; 
 
} 
 

 
body::after { 
 
    content: "pseudo - \a right sibling \a of header"; 
 
    white-space: pre; 
 
    grid-column: 3/4; 
 
    background-color: lightgreen; 
 
} 
 

 
header { 
 
    grid-column: 2/3; 
 
    background-color: yellow; 
 
    padding: 5px; 
 
    display: grid; 
 
    grid-template-columns: 1fr 100px 1fr; 
 
    grid-gap: 5px; 
 
} 
 

 
header nav { 
 
    grid-column: 2/3; 
 
    border: 1px dashed red; 
 
} 
 

 
header::before { 
 
    content: "pseudo - \a left sibling \a of nav"; 
 
    white-space: pre; 
 
    grid-column: 1/2; 
 
    border: 1px dashed red; 
 
} 
 

 
header::after { 
 
    content: "pseudo - \a right sibling \a of nav"; 
 
    white-space: pre; 
 
    grid-column: 3/4; 
 
    border: 1px dashed red; 
 
}

<body> 
 
    <header> 
 
    <nav> 
 
     <ul> 
 
     <li><a href='#'>Link</a></li> 
 
     <li><a href='#'>Link</a></li> 
 
     <li><a href='#'>Link</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</body>

Quelle

2017-09-05 12:05:13

Pseudo-Elemente in CSS-Gitter positionieren

Antwort

Verwandte Themen