Position Fixed: come regolare i margini?

[99caos]

Salve gente, stavo testando le potenzialità del position fixed e vorrei capire come gestire il posizionamento.

In pratica la situazione è questa:

<div id='container'>
 <div id='menu'>
</div>
</div>

#container { width: 600px; margin-left: auto}
#menu { position: fixed; width: 100px; right: 475px; }

In questo modo però se si restringe la finestra del browser il menu si sposta di lato mantenendo la distanza di 475px dal bordo della finestra.

E' chiaro che position fixed posizione l'elemento relativamente al body, a me servirebbe però che questi tenga conto della dimensione del suo contenitore e non del body: dovrebbe essere fisso solo in verticale dunque, mentre in orizontale dovrebbe considerare il luogo in cui si trova, non so se mi sono spiegato.

[gra-fichetto]

Originariamente inviato da 99caos
...a me servirebbe però che questi tenga conto della dimensione del suo contenitore e non del body: ...

Nel tuo CSS, applica "position: relative" al contenitore e "position: absolute" ( e relativi valori di "top" e "left") al contenuto. Al contenitore potresti anche applicare un valore in Percentuale per il "width".
Naturalmente è da considerare il comportamento dell'intera struttura della pagina.

[99caos]

ma se applico position absolute al contenuto non sto usando position fixed!?

non capisco la tua risposta

[gra-fichetto]

Originariamente inviato da 99caos
ma se applico position absolute al contenuto non sto usando position fixed!?

No.
Questo è quanto si possa leggere dalle guide presenti su html.it

Una corretta definizione di posizionamento assoluto

il posizionamento assoluto di un <div>, non fa riferimento alle coordinate assolute all'interno della pagina, ma indica invece la posizione rispetto all'elemento che lo contiene.

Qui puoi facilmente ricavare le informazioni necessarie.

[99caos]

ma io voglio appunto usare position: fixed!, e position: fixed non si comporta come position: absolute

intendo dire che che position absolute posiziona assolutamente in relazione al primo elemento padre posizionato relativamente (o assolutamente!?) mentre position fixed sembra posizionare sempre e solo relativamente alla finestra del browser.


Per ottenere l'effetto desiderato ho dovuto procedere per vie macchinose.

Se do semplicemente l'indicazione right: 500px; questa, essendo relativa alla finestra e non al contenitore del mio elemento fixed, rimane fissa al ridursi della finestra del browser (in senso ovviamente orizontale), quindi l'elemento esce fuori dall'impaginazione.

Per posizionarlo dove voglio ho dovuto dargli width: 500+widthRealeDell'Elemento e right: 0 (il layout in questione è posizionato sulla destra con margin-left: auto per intenderci).

Però avevo così un'altro problema, in firefox non mi si scrollava il contenuto che normalmente stava alla destra dell'elemento reso fixed, se non sotto l'area definita da width e height dell'elemento fixed.

Per ovviare a cio ho dovuto dargli uno z-index negativo (gli elementiconsideratisono fratelli).

Css mi sembra estremamente povero, ha potenzialità enormi ma è na sega comedicono qua in umbria!

[gra-fichetto]

Originariamente inviato da 99caos
ma io voglio appunto usare position: fixed!, e position: fixed non si comporta come position: absolute

E sennò li avrebbero chiamati uguale no?

Originariamente inviato da 99caos
Per ottenere l'effetto desiderato ho dovuto procedere per vie macchinose.
Se do semplicemente l'indicazione right: 500px; questa, essendo relativa alla finestra e non al contenitore del mio elemento fixed, rimane fissa al ridursi della finestra del browser (in senso ovviamente orizontale), quindi l'elemento esce fuori dall'impaginazione...
Per posizionarlo dove voglio ho dovuto dargli width: 500+widthRealeDell'Elemento e right: 0 (il layout in questione è posizionato sulla destra con margin-left: auto per intenderci).
Però avevo così un'altro problema, in firefox non mi si scrollava il contenuto che normalmente stava alla destra dell'elemento reso fixed, se non sotto l'area definita da width e height dell'elemento fixed.
Per ovviare a cio ho dovuto dargli uno z-index negativo (gli elementiconsideratisono fratelli).

Cioè a te serviva un finto frame con scroll sulla sinistra?

OT

Originariamente inviato da 99caos
comedicono qua in umbria!

Non ci posso credere: pure tu sei di Napoli e stai qui in umbria?

[99caos]

Certamente è utile avere la possibilità di fissare un elemento rispetto alla pagina, ma è anche interessante fissare lo stesso elemento relativamente ad un altro... come a dire ci dovrebbero essere position: relative fixed; e position: absolute fixed;

Ciò che sto facendo è un menu laterale che rimane fisso con lo scroll della pagina ma visto che la pagina è allineata a destra devo trovare un modo per indicare al menu che deve rimanere a quella distanza dal contenuto e non dalla finestra del browser.

Infatti quando si ridimensiona e appaiono le barre di scorrimento orizontali, il contenuto scrolla orizontalmente ma il menu resta fisso al valore di right impostato relativamente alla finestra del browser.

[farizzo]

Anche se la mia risposta arriva dopo un anno di distanza dall'ultimo post, credo utile proporre comunque una soluzione... a me sarebbe risultata utile in questi giorni.
Ho affrontato un problema simile, dove il mio menù è strutturato all'interno di un div con position:fixed in modo da renderlo sempre visibile allo scorrere verticale della pagina. Il problema nasce al ridimensionamento della pagina, tutto il contenuto varia perfettamente mentre il div position:fixed, mantenendo la stessa distanza dal bordo della finestra, fluttua in un punto sbagliato. Ma questa è storia vecchia, andiamo al sodo e cioè ad illustrare la soluzione che ho adottato.
Imporre al nostro div una distanza fissa dal bordo è una soluzione inadatta in caso di ridimensionamento della finestra, dobbiamo trovare dei punti fissi ma allo stesso tempo dinamici. Nel mio caso ho un div "background" con misura certa di 900px allineato centralmente rispetto al body, il mio div "menù" deve poggiare sempre sul lato sinistro interno del div "background", vi pubblico di seguito il codice che ho utilizzato e poi lo spiego.

#background {
position:relative;
width:900px;
z-index:10;
}

#menu {
position:fixed;
left:50%;
margin-left:-450px;
width:19em;
height:28.5em;
margin-top:0.5em;
z-index:20;
}

Come potete vedere dal codice ho allineato tramite il tag "left" il div menù al centro della pagina dando 50% come valore. Sfruttando il margine del div e la possibilità di inserire anche valori negativi, sapedo che il background misura 900px e che la sua metà sarà 450px, ho impostato un margine negativo di 450px ( -450px ), in questo modo il variare della dimensione della finestra non influerà sul mio riferimento, che resterà sempre il cento della finestra stessa (50%).

La stessa soluzione può essere utilizzata allineando il contenuto a destra o sinistra.

Spero che questa mia risposta sia di aiuto a qualcuno. A presto.