Jak możesz sprawić, by dwa <div> nakładały się na siebie?


154

Potrzebuję dwóch elementów div, aby wyglądały trochę tak:

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

Jaki jest najmodniejszy / najbardziej elegancki sposób, aby je starannie zachodzić? Logo będzie miało stałą wysokość i szerokość i będzie dotykało górnej krawędzi strony.

css  html  overlap 

Odpowiedzi:


88

Mógłbym do tego podejść (CSS i 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>


2
czy istnieje sposób, aby treść po prostu uniknęła miejsca zajmowanego przez logo?
Javier

1
hmm czy możesz wyjaśnić? Rozumiem, że chcesz po prostu logo nad treścią? jeśli tak, to tylko normalny przepływ elementów div (więc usuń left, top, position z #logo). mam wrażenie, że masz na myśli coś innego! :)
Owen

2
Myślę, że chodziło o to, aby treść (tekst) była
zawijana

2
ah hmm, na pewno nie. problem związany z elementem może być zmienny lub umieszczony, ale nie jedno i drugie. dopóki nie opracują jakiegoś typu float: idei centrum ...
Owen

88

Po prostu użyj ujemnych marginesów, w drugim div powiedz:

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

I upewnij się, że ustawiłeś właściwość z-index, aby uzyskać żądaną warstwę.


9
Jest to zdecydowanie najprostsza metoda i można ją łatwo dostosować do nakładania się stopek, używając dolnej krawędzi marginesu w treści strony. Dzięki!
Peter DeWeese

1
to rozwiązanie wydaje się zależeć od DOCTYPE, prawda? ponieważ nie działało z HTML5 DOCTYPE, kiedy próbowałem.
alumi

2
Powinna to być akceptowana odpowiedź, pozycja bezwzględna zwykle powoduje problemy.
Dmitriy

5

Dzięki pozycjonowaniu bezwzględnemu lub względnemu można wykonywać różnego rodzaju nakładanie się. Prawdopodobnie chcesz, aby logo miało taki styl:

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

Uwaga: położenie bezwzględne ma swoje dziwactwa. Prawdopodobnie będziesz musiał trochę poeksperymentować, ale robienie tego, co chcesz, nie powinno być zbyt trudne.


1
Czy to spowodowałoby, że logo zachodziło na tekst w miejscu, gdzie są linki? A może przesunie linki na bok?

1
Nie, absolutnie skutecznie usuwa tag z przepływu. Byłoby tak, jakby go tam nie było.
sblundy

2

Używając CSS, ustawiasz logo div na pozycję bezwzględną i ustawiasz kolejność z na wyższą od drugiego div.

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

1

Jeśli chcesz, aby logo zajmowało miejsce, prawdopodobnie lepiej jest przesuwać je w lewo, a następnie przesuwać zawartość za pomocą marginesu, mniej więcej tak:

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

#zadowolony {
    margines: 10px 0 0 10px;
}

lub dowolny margines.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.