HTML Warum sind diese zwei Elemente nicht direkt übereinander positioniert?

Question

Ich versuche, etwas HTML-Code zu schreiben, um ein anderes Element direkt über einem pre Textblock zu überlagern.

Das Problem ist, auch das einfachste Beispiel nicht richtig ...

<div style="position:relative"> 
<pre style="position:absolute"> 
hello 
</pre> 
    <div style="position:absolute"> 
    world 
    </div> 
</div> 

auszurichten scheint können Sie die Ausgabe here sehen.

Das Element div wird über das Element pre gerendert. Warum passiert dies?

Weitere Informationen zur Positionierung von Elementen finden Sie unter here.

Answer 1

Die pre Tag eine Marge von margin: 1em 0px; standardmäßig hat, so dass Sie die Ränder auf Null setzen, müssen diese außer Kraft setzen . Dann ist da noch eine kleine Lücke. Dies liegt an der Schriftart. In meinem Beispiel. Ich habe die font-family überschrieben, um die font-family des Elternteils zu erben, so dass die Elemente perfekt ausgerichtet sind. Eine andere Sache ist, kann die gleiche Wirkung umgekehrt für font-family für die div Tag anstelle des pre Tag

pre{ 
 
margin:0px; 
 
font-family:inherit; 
 
}

<div style="position:relative"> 
 
<pre style="position:absolute"> 
 
hello 
 
</pre> 
 
    <div style="position:absolute"> 
 
    world 
 
    </div> 
 
</div>

Answer 2

Tatsächlich ist das div Element "ist" über das pre Element gerendert. Wir können es einfach nicht sehen. Ich fügte ein border Attribut von css hinzu, um es wegen der "Vorspanne" zu visualisieren.

<div style="position:relative"> 
 
    <pre style="position:absolute"> 
 
hello 
 
</pre> 
 
    <div style="position:absolute; border:1px solid red;"> 
 
    world 
 
    </div> 
 
</div>

Das heißt, Sie können jetzt ein bisschen einige css fügen Sie es verschieben und bekommen, was Sie wollen, wie dieses !!

<div style="position:relative"> 
 
    <pre style="position:absolute"> 
 
hello 
 
</pre> 
 
    <div style="position:absolute; border:1px solid red; top: 7px"> 
 
    world 
 
    </div> 
 
</div>

Hoffnung, die hilft !! Auch ich erfuhr, dass das pre Tag einige Standard margin an der Spitze hat. Um das zu sehen, schaut euch das an !!

prüfen diese Fiddle

Damit zu entfernen, einfach setzen margin auf 0 Fiddle