it-swarm.com.de

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

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.

145
st elmos fire

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>
82
Owen

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

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

Stellen Sie außerdem sicher, dass Sie die Z-Index-Eigenschaft so festlegen, dass die gewünschte Schichtung erhalten wird.

76
TravisO

Mit absoluter oder relativer Positionierung können Sie alle Arten von Überlappungen ausfü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.

4
sblundy

Wenn das Logo Platz beanspruchen soll, ist es wahrscheinlich besser, es nach links zu verschieben und dann den Inhalt mit dem Rand nach unten zu verschieben.

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

oder was auch immer Rand Sie wollen.

1
jishi

Mit CSS setzen Sie das Logo div auf absolute Position und die Z-Reihenfolge auf über dem zweiten Div.

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