Ho un'intestazione, mainbody e footer. Intestazione e corpo principale sono correttamente in stile. Ora, per footer voglio farla apparire dietro mainbody, quindi ho usato:CSS con problema di posizionamento relativo negativo
z-index: -1;
position: relative;
top: -60px;
Questo dà il risultato desiderato, ma ho uno spazio extra di 60px in basso.
Come si elimina questo spazio aggiuntivo?
Paul è corretto. margin-top: -60px; anziché top: -60px;. Un'altra possibile soluzione sarebbe quella di impostare il "mainbody" su position: relative; per utilizzare position: absolute; bottom: 60px; sul piè di pagina - sebbene questo woild significhi che il footer debba essere spostato all'interno di "mainbody". anche se il genitore del footer scorre con "mainbody", puoi usare lo stesso trucco su quell'elemento.
Grazie prodigitalson. Ho provato entrambe le soluzioni che hai fornito. Per margin-top: - 60px non apporta modifiche e rimane lì da solo. Tuttavia in DW mostra l'effetto. Usando anche position: absolute, il div # footer si comporta diversamente. Penso che ci sia qualcosa nel mainbody stesso che sta causando l'errore. Grazie a tutti per consigli e suggerimenti rapidi. Davvero apprezzato. – noobcode
margin-top ha funzionato per me. Grazie – mark
Ho lo stesso problema: se metti un colore dietro al testo vedrai che il browser sta "rendendo" il testo nella posizione normale, quindi lo sposta in alto, quindi sta creando uno spazio. Ho bisogno di un'ombra sul mio rollover, quindi non funziona. – niico
Un modo per ottenere ciò sarebbe quello di mettere il div all'interno di un altro, absolute posizionato su div in modo che sia estratto dal flusso del documento.
Inoltre, non sono sicuro di ciò che si ottiene con 'z-index', sono sicuro che non cambierebbe nulla se si disattiva questa regola. IIRC, negativo 'z-index'' nasconde il contenuto durante la stampa - e il gioco è fatto. – raveren
In realtà con Z-index = -1, voglio che il piè di pagina appaia a metà dietro al corpo. Quindi sembra che il mio footer inizi da qualche parte dietro il corpo e continui fino alla fine della pagina. – noobcode
I * think * z-index funziona solo con valori positivi eccetto il caso di stampa. Ad ogni modo, hai provato la soluzione "assoluta"? – raveren
Lo spazio "extra" in basso è lo spazio occupato dal footer. Gli elementi posizionati in modo relativo occupano ancora lo stesso spazio nel flusso del layout della pagina, anche se appaiono da qualche altra parte.
Si potrebbe provare un margine inferiore negativo sul corpo principale. Questo potrebbe significare che non hai bisogno di top: -60px; sul piè di pagina.
L'ho provato, ma ha ridotto il corpo principale. Lo spazio extra a causa del footer esiste ancora. Grazie per la risposta. – noobcode
Hmmm. Che ne dici di sostituire 'top: -60px' sul piè di pagina con' margin-top: -60px'? Ciò dovrebbe influire sul flusso del documento e sul posizionamento del piè di pagina. (Suppongo che il tuo footer sia alto 60 pixel.) –
Non proprio una risposta diretta alla tua domanda, ma a seconda di ciò che desideri mostrare dietro il contenuto principale, puoi forse solo fingere.
Se si tratta di un'immagine, è sufficiente inserirla in html {} o (o in un div che incapsula tutto il contenuto) e allinearla verso il basso.
Grazie jeroen per la tua risposta .. – noobcode
È 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 - il piè di pagina.
un'altra soluzione per questo è:
z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;
superiore crea margine extra e margin-bottom rimuove lo
per qualche motivo per h tag solo questo ha funzionato per me. negativo margin-top non funziona
In quali browser? E hai una pagina dimostrativa? – jeroen
Attualmente sto usando firefox per la codifica. Ce l'ho al localhost. – noobcode
Grazie Paul per aver modificato il mio post e renderlo più pulito. La prossima volta cercherò di essere più chiaro. Grazie – noobcode