CSS utilizzando negativa rispetto emissione posizionamento

Question

Ho un colpo di testa, mainbody e piè di pagina. Intestazione e mainbody sono adeguatamente arredate. Ora, per footer voglio farla apparire dietro mainbody, quindi ho usato:

z-index: -1;
position: relative;
top: -60px;

Questo dà il risultato desiderato, ma ottengo uno spazio extra di 60px in basso.

Come faccio a cancellare questo spazio extra?

Answer 1

Paul è corretta. margin-top: -60px; invece di top: -60px;. Un'altra possibile soluzione potrebbe essere quella di impostare il "mainbody" per position: relative; quindi di utilizzare position: absolute; bottom: 60px; sul piè di pagina - anche se questo significa woild il piè di pagina deve essere spostato dentro "mainbody". anche se fino a quando la madre di piè di pagina scorre con "mainbody" si potrebbe usare questo stesso trucco su quell'elemento, invece.

Answer 2

Lo spazio “extra” in fondo è lo spazio che il piè di pagina avrebbe preso su. Relativamente elementi posizionati ancora occupano lo stesso spazio del flusso di layout della pagina, anche se sono apparire da qualche altra parte.

Si potrebbe provare un margine inferiore negativo sul vostro mainbody. Si possono trovare questo significa che non è necessario top: -60px; sul piè di pagina.

Answer 3

È comunque possibile utilizzare:

position: relative;
top: -60px;

per la sezione avete bisogno, ma impostare

margin-top: -60px;

alla sezione che appare accanto. In questo caso -. Piè di pagina

Answer 4

Un modo per raggiungere questo sarebbe di mettere il div all'interno di un altro, absolute'ly posizionato div in modo che sia tolto dal flusso di documenti.

Answer 5

Non proprio una risposta diretta alla tua domanda, ma a seconda di ciò che si desidera visualizzare dietro il contenuto principale, si può forse solo fingere.

Se E'un'immagine, si può semplicemente mettere in html {} o body {} (o un div che racchiude tutti i contenuti) e allinearlo al fondo.

Answer 6

un'altra soluzione per questo è:

z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;

top crea margine extra e margin-bottom rimuove esso

per qualche motivo per h tag solo questo ha funzionato per me. negativo margin-top non funziona