Position: relative e absolute

**iceberg** · 16-09-2006, 22:46

Ciao, qualcuno potrebbe spiegarmi la differenza ed i risvolti pratici nell'utilizzo di relative rispetto ad absolute?

Grazie

**webdemo** · 16-09-2006, 23:13

prova a visualizzare questo esempio:

codice:

<style type="text/css">
<!--
div#container {
	height: 200px;
	width: 200px;
	left: 50px;
	top: 50px;
	background: #FF9900;
}
div#contentabs {
	background: #0044FF;
	height: 50px;
	width: 50px;
	position: absolute;
	left: 50px;
	top: 50px;
}
div#contentrel {
	background: #0066FF;
	height: 50px;
	width: 50px;
	position: relative;
	left: 50px;
	top: 50px;
}
-->
</style>
</head>

<body>
<div id="container">container
</div>

<div id="container">container
  <div id="contentrel">relativo</div>
</div>

<div id="contentabs">assoluto</div>

sono due div container (arancione)
che contengono due div content (azzurro) il primo content e' relativo e il secondo assoluto
nota come il secondo "contentabs" pur trovandosi in fondo viene visualizzato per primo, proprio perche' avendo proprieta' assoluta non dipende dagli altri elementi,
quello relativo invece "contentrel" e' vincolato dal container (il secondo arancione).

ciaux

**iceberg** · 16-09-2006, 23:29

Grazie mille per l'esempio dettagliato!!! Ora mi è molto piu chiaro....

me lo riguardo ancora e faccio alcune prove

Thanks

**Another-Life** · 17-09-2006, 11:20

Una domanda:

Se ci sono piu elementi(la cui posizione è position: relative) all'interno di un div( id="container"),la posizione di ogni singolo elemento fara riferimento solo all'elemento genitore(quale il div principale)??

**webdemo** · 17-09-2006, 12:05

se un elemento ha proprieta' realtive deve "fare i conti" con tutti gli elementi contenuti nell'elemento genitore:

codice:

<style type="text/css">
<!--
div#container {
	height: 200px;
	width: 200px;
	left: 50px;
	top: 50px;
	background: #FF9900;
}
div#contentabs {
	background: #0044FF;
	height: 50px;
	width: 50px;
	position: absolute;
	left: 50px;
	top: 50px;
}
div#contentrel {
	background: #0066FF;
	height: 50px;
	width: 50px;
	position: relative;
	left: 50px;
	top: 50px;
}
div#contentrel1 {
	background: #0066FF;
	height: 50px;
	width: 50px;
	position: relative;
	left: 50px;
	top: 50px;
}
-->
</style>
</head>

<body>
<div id="container">container
</div>

<div id="container">container
  <div id="contentrel">relativo</div>
  <div id="contentrel1">relativo</div>
</div>

<div id="contentabs">assoluto</div>

vedi comportamento di div#contentrel1

ciaux

**Another-Life** · 21-09-2006, 11:05

Non è facile da capire,ma l'elemento div#contentrel1 fa riferimento all'elemento che subito lo precede fino ad arrivare(attraverso gli altri elementi)al selettore genitore giusto?

**webdemo** · 21-09-2006, 12:06

si

ciaux

**Another-Life** · 21-09-2006, 15:06

ok grazie^^

Discussione: Position: relative e absolute

Strumenti discussione

Ricerca discussione

Visualizza

Position: relative e absolute

Permessi di invio