position:fixed

[dannie]

Ci sono controindicazioni particolari nell'uso di position:fixed? Dalle prime prove che sto facendo sembra che a IE non piaccia molto, o almeno non sono ancora riuscita a farlo funzionare come invece su FF...

[floyd46]

ciao
mi sa che non è supportato da IE.
Floyd

[dannie]

Ah... oh.. peccato...
Con relative e absolute non ci sono invece problemi vero? Invece, non mi è molto chiaro static.... :master:

[floyd46]

....static è simile a fixed; nn viene quasi mai usato.
relative ed absolute.. no problem.
Floyd

[dannie]

Grazie mille!

[seed_squall_it]

Static è il valore di default della proprietà position per tutti i box. In pratica, un box position: static è un normalissimo box all'interno del flusso del documento (ovvero è qualsiasi box per cui non si dichiara esplicitamente il valore di position).

Fixed è l'unico valore della proprietà position non supportato da IE...e ti pareva!!!

Relative e absolute vengono interpretati correttamente da tutti i maggiori browser. Relative in particolare è molto utile perché se viene applicato a un box senza specificare anche un offset (uno scostamento del box, tramite le proprietà top, right, bottom e left), mantiene il box nel normale flusso del documento (quindi è come se il box fosse sempre position: static). E pur mantenendo il box nel flusso, permette di usare tale box come "riferimento" per altri box interni ad esso posizionati in modo assoluto.

[seed_squall_it]

Aggiungo solo che fixed e static sono due valori della proprietà position molto diversi. Static, come detto prima, è il valore di default che non condiziona minimamente la posizione di un box nel normale flusso del documento.

Fixed è come un posizionamento assoluto (il box viene estratto dal normale flusso del documento e ha automaticamente un valore di z-index maggiore dei box statici), ma con una differenza.
Un box position: fixed ha come riferimento sempre e soltanto l'angolo superiore sinistro della pagina e una volta impostato, mantiene la sua posizione non rispetto alla pagina, ma rispetto alla finestra. Per questo motivo, anche scrollando la pagina, un box posizionato in modo fisso resta "fermo" nella sua posizione iniziale rispetto alla finestra. E' una cosa utile per creare ad es. un menu che "segue" la pagina che viene scrollata, o per far rimanere sempre "fermo" un box su un lato della finestra mentre la pagina scorre (è come se simulasse due frames).

[dannie]

Ti ringrazio davvero molto per le spiegazioni chiarissime, che mi hanno chiarito molto le idee e dato diversi spunti per la prosecuzione dei miei esperimenti table-less (in particolare il discorso del position:relative con top e left a 0)!
Fixed lo usavo appunto per tenere fissi intestazione e menu sinistro... a questo punto sono passata ad assegnare lo scroll al div dei contenuti! Però in questi "esperimenti" noto a volte dei comportamenti strani... per esempio poco fa avevo assegnato float:left al div del menu sinistro e position:relative con top e left a 0 al div dei contenuti e quest'ultimo si era posizionato a partire dall'estremità sinistra della pagina, sovrapposto al menu (ma in secondo piano)... questo in FF perchè invece in IE c'era la visualizzazione che mi aspettavo, affiancata. Ho risolto aggiungendo un margine sinistro solo per firefox (usando !important e poi margin:0px ...qualcosa sto imaprando eh? ).... ma poco dopo ho dovuto toglierlo perchè quando al div dei contenuti ho aggiunto overflow:auto si è immediatamente disposto a sinistra di quello float anche in FF (NB per ora vedevo le posizioni grazie ai bordi e sfondi colorati, non avevo ancora inserito neitne dentro).... Boh, ogni tanto queste cose mi confondono un po'... meno male che c'è il forum per chiedere consigli in questi moemnti!
Ciao e grazie!

[seed_squall_it]

Figurati...i posizionamenti non sono semplicissimi da capire e IE ci "aggiunge" sempre qualcosa di suo per "dare lavoro" a noi webmaster!

Cmq, per quanto riguarda quello che hai provato a fare, c'era un errore "di concetto". Quando imposti un box posizionato in modo statico con position: relative (per usarlo ad es. come riferimento per i box position: absolute al suo interno), non devi assegnargli anche un offset. Se tu scrivi:

position: relative;
top: 0;
left: 0;

al box a cui questa regola si applica, tu hai assegnato un offset (anche se nullo)! Quindi quel box sarà estratto dal normale flusso del documento e avrà z-index più elevato. Di conseguenza, non influirà sul layout degli altri box. In pratica, assegnando un offset anche nullo, il box non è più posizionato in modo statico, ma diventa posizionato in modo relativo a tutti gli effetti.
Invece, se allo stesso box assegni una regola simile a questa:

position: relative;

otterrai il risultato che quel box continuerà ad essere posizionato in modo statico (e quindi influirà sul layout degli altri box), ma diventerà anche il riferimento di eventuali box position: absolute al suo interno.

Per dirla in altri termini, un box position: relative si comporta diversamente se alla sua regola di stile aggiungi o meno un offset (anche a 0) con top: YYpx e left: XXpx.

PS: IE ha alcuni bug in certe situazioni con i posizionamenti relativi (con offset specificato) dei box...ma è raro usare i posizionamenti relativi con offset per "spostare"
un box rispetto alla sua posizione normale all'interno del flusso.

[dannie]

Uhmmm... capito... però la differenza di comportamento l'ho avuta (su FF) quando ho aggiunto la regola overflow:auto;... cioè, che il box si posizionasse dietro il menu o affiancato non era una grosso problema (ora mi dici che non servivano top e left: provo a toglierli!), mi bastava agguingere/togliere margin, quello che non capisco è perchè si è "spostato" quando gli ho aggiunto lo scroll verticale... non dovrebbe centrare nulla no? :master:
Nota: questo comportamento l'ho notato su FF, IE è sempre stato "coerente" (nell'errore probabilmente perchè me l'ha mostrato subito affiancato, comunque coerente).