Come faresti due <div> s sovrapposti?


154

Ho bisogno di due div per assomigliare un po 'a questo:

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

Qual è il modo più pulito / elegante per farli sovrapporre ordinatamente? Il logo avrà un'altezza e una larghezza fisse e toccherà il bordo superiore della pagina.

css  html  overlap 

Risposte:


88

Potrei avvicinarmi così (CSS e 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
c'è un modo per rendere i contenuti semplicemente evitare lo spazio utilizzato dal logo?
Javier,

1
hmm puoi chiarire? lo prendo per dire che vuoi solo il logo sopra il contenuto? in tal caso è solo un normale flusso di div (quindi rimuovi posizione sinistra, superiore, da #logo). ho la sensazione che intendi qualcos'altro però! :)
Owen,

2
Penso che il significato sia stato quello di avere il contenuto (testo) attorno al logo
Davy8,

2
ah hmm, sono abbastanza sicuro di no. il problema è che un elemento può essere flottato o posizionato, ma non entrambi. fino a quando non sviluppano una sorta di galleggiante: idea centrale ...
Owen,

88

Usa solo i margini negativi, nel secondo div dire:

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

E assicurati di impostare la proprietà z-index per ottenere il livello desiderato.


9
Questo è di gran lunga il metodo più semplice e può essere facilmente adattato per i piè di pagina sovrapposti utilizzando il margine inferiore sul contenuto di una pagina. Grazie!
Peter DeWeese

1
questa soluzione sembra dipendere da DOCTYPE, vero? perché non ho funzionato con HTML5 DOCTYPE quando ho provato.
alumi,

2
Questa dovrebbe essere la risposta accettata, la posizione assoluta tende a causare problemi.
Dmitriy,

5

Con il posizionamento assoluto o relativo, è possibile eseguire tutti i tipi di sovrapposizione. Probabilmente vuoi che il logo sia disegnato come tale:

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

Nota: la posizione assoluta ha le sue eccentricità. Probabilmente dovrai sperimentare un po ', ma non dovrebbe essere troppo difficile fare quello che vuoi.


1
Ciò causerebbe la sovrapposizione del logo al testo in cui si trovano i collegamenti? O spingerebbe i collegamenti sul lato?

1
No, assoluto rimuove efficacemente il tag dal flusso. Sarebbe come se non ci fosse.
sblundy,

2

Usando CSS, imposti il ​​logo div in posizione assoluta e imposta l'ordine z in modo che sia sopra il secondo div.

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

1

Se vuoi che il logo occupi spazio, probabilmente stai meglio fluttuando a sinistra e quindi spostando il contenuto verso il basso usando il margine, in questo modo:

#logo {
    galleggiante: a sinistra;
    margine: 0 10px 10px 20px;
}

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

o qualunque margine tu voglia.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.