[CSS] position:relative, ma come funziona?

**blur** · 17-11-2005, 11:29

ciao,

non ho capito bene come usare il position:relative..

Devo posizionare delle immagini attorno ad un altra immagine.

il tutto all'interno del contenitore div#banner:

codice:

#banner {
			padding: 0px;
			background: #FFF; 
		        text-align:left;
                        border:1px solid red
    }

come posiziono le img:

codice:

#home {position:relative;top:-40px;left:20px} 
  #lingua {position:relative;top:-50px;left:105px} 
  #partner {position:relative;top:-170px;left:210px} 
  #autori {position:relative;top:-235px;left:330px} 
  #guida { position:relative;top:-305px;left:430px}  
  #contatti {float:right;padding:20px}             
  #fumetti {position:relative;top:-374px;left:530px}

non capisco una cosa: position relative, ma rispetto a cosa?
perchè per posizionare le img i valori sono tutti negativi?
e perchè il div banner diventa così alto ( come da immagine allegata), impedendo al div "sidebar a" di posizionarsi in alto appena sotto all'immagine grande?

:master:

*pragma · 17-11-2005, 11:42

Originariamente inviato da blur
ciao,
......
non capisco una cosa: position relative, ma rispetto a cosa?
perchè per posizionare le img i valori sono tutti negativi?
e perchè il div banner diventa così alto ( come da immagine allegata), impedendo al div "sidebar a" di posizionarsi in alto appena sotto all'immagine grande?

:master:

- rispetto all'elemento padre quindi al div nel quale è contenuto
- se hanno posizionamenti con valori negativi è solo per l'esigenza del caso

Il div banner non l'ho guardato ... per mancanza di tempo
ciao

**pierofix** · 17-11-2005, 11:56

Se l'autore ha tempo gli suggerisco la lettura di questo documento del W3C che spiega in dettaglio il funzionamento dei posizionamenti:

- www.w3.org/TR/CSS21/visuren.html

**fcaldera** · 17-11-2005, 12:43

prendo spunto da questa discussione per avere un chiarimento

io ho una struttura del tipo

codice:

...
<body>
  <div id="container">
    <div id="box1"></div>
    <div id="box2"></div>
  </div>
</body>
...

Secondo ciò che èstato detto, se io uso position:relative
per i div box1 e box2 questi si posizionano in relazione all'elemento padre, corretto?

A me succede che l'elemento box1 è effettivamente posizionato in relazione all'elemento container (il padre)
ma box2 mi si posiziona in base a box1.

C'e' un modo di usare il posizionamento relativo per box2 e dirgli che è relativo al padre e non a box1?? Mi risolverebbe una caterva di problemi....

**Mich_** · 17-11-2005, 12:49

@fcaldera.
Vedi ad esempio: http://www.w3schools.com/css/pr_class_position.asp

relative Moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

Oppure vedi anche il manuale che propone sempre pierofix, quello originale del W3C: www.w3.org/TR/CSS21/ dove forse trovi aiuti piu` precisi.

**blur** · 17-11-2005, 12:53

credo di aver risolto ( da quanto ho letto ) mettendo nel div padre, cioè #banner, il position:relative e posizionando gli elementi img con absolute.

cosa ne dite?

Discussione: [CSS] position:relative, ma come funziona?

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] position:relative, ma come funziona?

Re: [CSS] position:relative, ma come funziona?

Permessi di invio