Warum verschiebt dieses DIV den HTML-Inhalt nach unten?

Question

Ich habe ein DIV, das ich in meinen HTML-Inhalt einfügen möchte. Jedes Mal, wenn ich das tue, verschiebt sich der Inhalt von der Stelle, an der das DIV im Inhalt erscheinen WÜRDE, nach unten. Er verschiebt sich um die Höhe des DIVs nach unten. Ich habe "hätte erscheinen sollen", weil die Position relativ ist.

Hier ist etwas Code: (DAS DIV, DAS ICH MEINE, IST DASJENIGE MIT ID="pop"

<table border="0" align="center">
  <tr>
    <td><div id="pop" style="position:relative; z-index:20; top:100px; left:480px; width:208px; height:52px;"><img src="../Graphics/valj_oxo_komm.png"></div>
<div class="nav_container" id="nav_container">
   <div id="nav_container2" style="position: relative; left: 0%; top: 13%;">
       HERE IS ALL THE CONTENT

und etwas css:

nav_container{
width:720px;
height:180px;
background-image:blablabla;
}

Wenn Sie mehr Input brauchen, sagen Sie es mir und ich werde dieses Q aktualisieren.

Der Inhalt bewegt sich nach unten, obwohl ich eigentlich die div ('pop') positionieren kann, wo ich will, aber ich will nicht, dass der Inhalt nach unten bewegt wird. Ich meine, alles sieht gut aus, außer Inhalt ist ALLE nach unten 52px verschoben.

Danke

Answer 1

Wenn ich es richtig verstanden habe, soll DIV über dem restlichen Inhalt erscheinen und völlig unabhängig vom Rest Ihrer Website sein. Um das zu erreichen, müssen Sie position: absolute statt position: relative . relativ erlaubt es im Grunde, ein Element von seiner ursprünglichen Position zu verschieben, aber der Platz, den das Element eingenommen hat, ist immer noch da und deshalb ist der gesamte Inhalt in Ihrem Fall nach unten verschoben.

Wenn Sie sich bewerben position: absolute Element wird aus dem Fluss der Seite herausgenommen und die folgenden Elemente sollten nicht nach unten verschoben werden. Allerdings müssen Sie dann sicherstellen, dass sich DIV#pop im richtigen Kontext bewegt, aber darum müssen Sie sich später kümmern ;)

Ich hoffe, meine Erklärung macht Sinn, aber vielleicht finden Sie auch dies dieser Link nützlich

Answer 2

Was Sie beschreiben, ist das beabsichtigte Verhalten von position: relative .

Ich bin mir nicht sicher, was Sie erreichen wollen, aber versuchen Sie es mit einem Wrapper außerhalb pop mit position: relative und geben pop position: absolute . Das sollte Sie in die Lage versetzen, sich zu bewegen. pop ohne den Rest des Inhalts zu verschieben.

Wenn Sie nur position: absolute wird die Positionierung relativ zur linken oberen Ecke des Ansichtsfensters und nicht zur Ecke der Tabelle erfolgen, was wahrscheinlich nicht das ist, was Sie wollen.

Answer 3

Sie müssen die Position auf "absolut" setzen, um die Möglichkeit zu erhalten, das div zu platzieren, wo immer Sie wollen (und auch die Möglichkeit, z-Indizes zu verwenden).

Answer 4

Versuchen Sie, unten css hinzufügen oder versuchen, oben Größe, die Sie für die div zB angegeben haben zu verringern oben:100px

  <style type="text/css">
    #pop
    {
       display:inline;
    }
  </style>