Wie würden Sie zwei <div> s überlappen?

154

Ich brauche zwei Divs, um ein bisschen so auszusehen:

    |               |
 ---|    LOGO       |------------------------
|   |_______________|  LINKS                |
|             CONTENT                       |

Was ist die sauberste / eleganteste Art, sie sauber überlappen zu lassen? Das Logo hat eine feste Höhe und Breite und berührt den oberen Rand der Seite.

88

Ich könnte es so angehen (CSS und HTML):

html,
body {
  margin: 0px;
}
#logo {
  position: absolute; /* Reposition logo from the natural layout */
  left: 75px;
  top: 0px;
  width: 300px;
  height: 200px;
  z-index: 2;
}
#content {
  margin-top: 100px; /* Provide buffer for logo */
}
#links {
  height: 75px;
  margin-left: 400px; /* Flush links (with a 25px "padding") right of logo */
}

<div id="logo">
  <img src="https://via.placeholder.com/200x100" />
</div>
<div id="content">
  
  <div id="links">dssdfsdfsdfsdf</div>
</div>

Erweitern Sie das Snippet

Owen
quelle

2

Gibt es eine Möglichkeit, Inhalte so zu gestalten, dass nur der vom Logo belegte Platz vermieden wird?

Javier

1

hmm kannst du das klären Ich verstehe das so, dass Sie nur das Logo über dem Inhalt haben möchten. Wenn ja, ist das nur ein normaler Fluss von Divs (also entfernen Sie links, oben, Position aus #logo). Ich habe das Gefühl, du meinst etwas anderes! :)

Owen

2

Ich denke, was gemeint war, war, den Inhalt (Text) um das Logo zu wickeln

Davy8

2

ah hmm, ich bin mir ziemlich sicher nicht. Das Problem, ein Element zu sein, kann schwebend oder positioniert sein, aber nicht beides. bis sie eine Art Float entwickeln: zentrale Idee ...

Owen

88

Verwenden Sie einfach negative Ränder, im zweiten Teil sagen Sie:

<div style="margin-top: -25px;">

Stellen Sie außerdem sicher, dass Sie die Eigenschaft z-index festlegen, um die gewünschte Überlagerung zu erhalten.

TravisO
quelle

9

Dies ist bei weitem die einfachste Methode und kann leicht für überlappende Fußzeilen angepasst werden, indem der Rand einer Seite am Rand einer Seite verwendet wird. Vielen Dank!

Peter DeWeese

1

Diese Lösung scheint von DOCTYPE abzuhängen, nicht wahr? weil es mit HTML5 DOCTYPE nicht funktioniert hat, als ich es versuchte.

Alumi

2

Dies sollte die akzeptierte Antwort sein, Position absolut kann Probleme verursachen.

Dmitriy

5

Mit absoluter oder relativer Positionierung können Sie alle Arten von Überlappungen durchführen. Sie möchten wahrscheinlich, dass das Logo so gestaltet wird:

div#logo {
  position: absolute;
  left: 100px; // or whatever
}

Hinweis: Die absolute Position hat ihre Exzentrizität. Sie müssen wahrscheinlich ein wenig experimentieren, aber es sollte nicht zu schwer sein, das zu tun, was Sie wollen.

sblundy
quelle

1

Würde dies dazu führen, dass das Logo den Text überlappt, in dem sich Links befinden? Oder würde es die Links zur Seite schieben?

1

Nein, absolut entfernt das Tag effektiv aus dem Flow. Es wäre, als wäre es nicht da.

sblundy

2

Mit CSS setzen Sie das Logo div auf die absolute Position und die z-Reihenfolge auf das zweite div.

#logo
{
    position: absolute:
    z-index: 2000;
    left: 100px;
    width: 100px;
    height: 50px;
}

FlySwat
quelle

1

Wenn Sie möchten, dass das Logo Platz einnimmt, ist es wahrscheinlich besser, es nach links zu schweben und dann den Inhalt mithilfe des Randes nach unten zu verschieben.

#logo {
    float: left;
    Rand: 0 10px 10px 20px;
}}

#content {
    Rand: 10px 0 0 10px;
}}

oder was auch immer Sie wollen.

Jishi
quelle

Wie würden Sie zwei <div> s überlappen?

Antworten: