posizionamento body:relativo

**reynold85** · 06-12-2014, 16:32

Ciao ragazzi sto tentando di realizzare un semplice foglio di stile con lay out a due colonne. Ho creato un css esterno, poi nalla pagina html utilizzo delle div.
Più o meno me la sono cavata ma per risolvere alcune questioni mi è stato detto di impostare il body della pagina html su relativo. Ora, conosco il posizionamento assoluto e relativo e comprendo cosa voglia die impostare relativo in un div, ma non mi è chiaro cosa vuol dire impostare il body html su relativo. Cioè che senso ha? Relativo rispetto a cosa?

**KillerWorm** · 09-12-2014, 00:01

Ciao, normalmente <body> è un elemento contenuto dentro l'elemento <html>, quindi sarà relativo a quest'ultimo, ma non è questo il punto.
Tu conosci il posizionamento assoluto ma probabilmente ti sta sfuggendo questa nozione fondamentale:

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>

(fonte: http://www.w3schools.com/css/css_positioning.asp)

In italiano:
Un elemento con position absolute viene posizionato in relazione al primo elemento genitore che ha un posizionamento diverso da static. Se non viene trovato un elemento del genere, il blocco che lo contiene è <html>.

Giusto per chiarire, l'elemento <body> potrebbe avere dei margini o un suo proprio posizionamento, per cui il riferimento di questo potrebbe risultare diverso da quello dell'elemento <html>.

Dando al body, semplicemente, la regola position:relative, non stai facendo altro che predisporlo per fare da base di riferimento ad eventuali elementi che hanno position absolute (figli o discendenti qualora non abbiano un altro genitore con position diverso da static), ed impedire che questi facciano, invece, riferimento ad <html>.

**reynold85** · 11-12-2014, 19:57

ah, quindi se imposto body relative e dentro ci metto un div con position absolute tale div non sarà posizionato in senso assoluto rispetto alla finestra del browser ma sarà posizionato rispetto al body?

**KillerWorm** · 11-12-2014, 21:16

Sarà posizionato rispetto al body ma, più esattamente, "non sarà posizionato in senso assoluto rispetto all'elemento <html>" (che non per forza corrisponde alla finestra del browser).

**reynold85** · 12-12-2014, 15:50

allora ho fatto il lay out ma ho un problema:non riesco ad inserire il footer.
Ho fatto un div contenitore, posizionato relativo e dentro ci ho posizionato header left e right. Il footer non riesco a farlo visualizzare in nessun modo
CSS

codice:

#contenitore{
padding:0;
border:none;
margin:0;
width:100%;
height:100%;
bottom:0px;
position:relative;
background-color:blue;
overflow:scroll;
}


#header{
position:absolute;
top:0px;
width:100%;
height:50px;
text-align:center;
background-color:pink;
}


#left{
position:absolute;
top:50px;
left:0px;
width:25%;
height:100%;
text-align:center;
background-color:yellow;
}
#right{
position:absolute;
top:50px;
right:0px;
width:25%;
height:100%;
text-align:center;
background-color:yellow;
}


#footer{
bottom:0px;
left:0px;
width:100%;
height:50px;
text-align:center;
background-color:orange;
}


body{
padding:0;
margin:0;
}

html

codice:

<html>


<head>
		<title>prova</title>	
		<link rel="stylesheet" href="blabla.css" type="text/css"/>
</head>


<body>
<div id="contenitore">
<div id="header">
header
</div>
<div id="left">
left
</div>


<div id="right">
right
</div>
<div id="footer">
footer
</div>
</div>


</body>
 </html>

**reynold85** · 12-12-2014, 15:57

Ho risolto inserendo poaition absolute anche nel footer.
Ora però ho un altro problema. Avendo impostato overflow:scroll nel div contenitore, il footer non è più in fondo alla pagina.
Come potrei risolvere?
grazie

Discussione: posizionamento body:relativo

Strumenti discussione

Ricerca discussione

Visualizza

posizionamento body:relativo

Permessi di invio