Divs der gleichen ID überlappen

Ich habe zwei divs auf meiner Seite und habe ihnen beide die Klasse "nav" gegeben.Divs der gleichen ID überlappen

Hier ist meine CSS:

.nav { 
border-radius: 1em; 
background-color: #0000BB; 
color: white; 
padding: 1em; 
position: absolute;//Fits size to content. 
margin: 1em; 
left: 50%; 
transform: translate(-50%); 
display: block 
}

ich diese beiden divs wollen, die das gleiche Format haben nacheinander in der Reihenfolge, wie sie in meinem HTML erscheinen erscheinen, aber aus irgendeinem Grund sie direkt auf erscheinen übereinander. Sollte dies nicht durch das Attribut "display: block" verhindert werden?

EDIT: CSS von ID zu Klasse aktualisiert.

Quelle

2016-05-22 Brandon H.

IDs ** müssen ** eindeutig sein. Außerdem müssen Sie eine [mcve], nicht nur eine CSS-Regel bereitstellen. Und absolut positionierte Elemente werden in Bezug auf ihren nächstliegenden Vorfahren positioniert. Lesen Sie https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning – j08691

Ändern Sie die ID in eine Klasse - wie @ j08691 sagt - IDs müssen eindeutig sein. – gavgrif

Das Problem bleibt bestehen, wenn ich sie auch in Klassen ändere. –

Das Problem ist, dass Sie die Eigenschaft "Position: absolute" verwenden, was bedeutet, dass die Eigenschaft "display" nicht funktioniert, versuchen Sie stattdessen mit position: 'relative'.

Quelle

2016-05-22 04:50:38 Johnnyenc

und in Ihrem Fall Klassen anstelle von IDs – Johnnyenc

habe ich versucht, aber ich möchte die divs nur so groß wie ihre Inhalte und mit der Position: 'relativ' die divs erstrecken sich über die gesamte Breite der Seite. –

Können Sie mit Ihrem aktuellen Code etwas anfangen? @BrandonH. – Johnnyenc

Antwort

Verwandte Themen