Blocco con position:relative

**UnNamed** · 13-12-2006, 19:56

Davvero non mi era mai successo di perdere un pomeriggio dietro a 2 problemi che non riesco a risolvere. Il primo è questo:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<html>
	<head>
		<title>title</title>
		<style type="text/css">@import url(stile.css);</style>	
	</head>	
	<body> 
		<div id="container">
			<div id="menu">
				rfdfsdf
			</div>
		</div>
        </body>
</html>

Stile:

codice:

html,body{
    text-align: center; 
    background-color: white;
    margin:0px;
    }

div#container{
    background-color:gray;
    width: 1024px;
    height: 780px;
    margin: 0px auto;  
    text-align: left; 
    padding:0px;
    border:1px solid red;
    } 


#menu{
        position:relative;
	bottom:76px;
	width:130px;
	height:130px;
	left:10px;
      }

Perchè il blocco menù si posiziona in alto a sinistra e non in basso????

**Nenella** · 13-12-2006, 20:04

Devi usare per #menu position:absolute e per #container position:relative.

Il "fattaccio" è che la posizione relativa, non è riferita al blocco contenitore, ma alla posizione normale che il div prenderebbe. Per cui se tu indichi bottom:76px e left:10px il div viene spostato di 10px a dx e 76px in alto rispetto alla posizione che avrebbe avuto senza questa dichiarazione.
Con absolute invece si posiziona rispettivamente al primo box contenitore con dichiarazione position:relative, o, in mancanza di questa, al body.

Spero di essere stata chiara

(forse pochino, ops)

Comunque sono a tua disposizione per altri chiarimenti.

Nené

**UnNamed** · 13-12-2006, 22:18

ho capito cosa intendi, io pensavo che il relative si riferisse al blocco in cui è contenuto. A questo punto però ho un problema. Devo realizzare un sito in cui il menù parte dal basso. Senza usare complicati javascript come faccio ad inserire nel mio contenitore un blocco che parta sempre dal basso???

**Mich_** · 14-12-2006, 10:13

Secondo me il problema e` un altro.
Per vederlo da' uno sfondo diverso al #container: dovrebbe risultare che il #menu si posiziona correttamente in basso, ma il #container e` alto non piu` del #menu.

Poi prova a dare una altezza al #container (piu` alta del #menu) ...

A seconda di come e` fatto il resto della pagina, puoi dare l'altezza anche in %, ma in tal caso devi dare l'altezza 100% anche al <body> e all'<html>.

Discussione: Blocco con position:relative

Strumenti discussione

Ricerca discussione

Visualizza

Blocco con position:relative

Permessi di invio