posizione: fissa quando sinistra/alto/destra/basso non sono specificati - risultati desiderati in FF/IE, ma non in Safari

Question

Mi spiace dover chiedere ancora un'altra domanda position:fixed, ma leggere varie altre domande e thread del forum non mi ha aiutato con questo.

Il codice che segue è una dimostrazione semplificata di come ho utilizzato position:fixed in un progetto fino ad oggi. La mia comprensione originale (errata) di position:fixed è che inizialmente si risolve in relazione al primo contenitore padre posizionato e quindi rimane in quella posizione indipendentemente dalla posizione di scorrimento della finestra. Ora mi rendo conto che è sbagliato: infatti, le posizioni position:fixed relative al contenitore più esterno (ad esempio il tag html) e le posizioni position:absolute relative al primo contenitore padre che ha una posizione diversa da static.

Leggendo varie altre domande su SO, mi rendo conto che l'effetto che stavo cercando di ottenere usando position:fixed è quello che molte altre persone hanno provato, ma poi realizzato non è possibile con solo CSS: vale a dire posizionare un elemento relativo a un contenitore, ma poi mantenerlo nel punto in cui è relativo alla finestra di visualizzazione quando si scorre la pagina.

Ciò che mi confonde è che quanto sopra è esattamente ciò che mi sembrava di aver raggiunto, almeno su FF e IE8. Con l'esempio di codice riportato di seguito, il "contenuto del riquadro a destra fissa" viene inizialmente posizionato a destra del riquadro rosso "contenuto scorrevole scorrevole" e si trova a livello verticale con la parte superiore del contenuto centrale. Il contenuto centrale può essere scostato, ma il contenuto della mano destra rimane dove si trova, come se inizialmente si posizionasse staticamente nel flusso normale del documento, ma in seguito rimane fisso sul viewport.

ora mi rendo conto che questo sembra 'lavoro' in IE8 e FF, semplicemente perché non ho specificato top/bottom/left/right attributi all'elemento fixed. Se lo faccio, mi rendo conto che l'elemento fixed diventa immediatamente posizionato rispetto al viewport.

Avevo ipotizzato - forse pericolosamente - fino ad ora che se le posizioni relative non sono specificate, quindi position:fixed posizionerà di default quell'elemento in cui verrebbe normalmente posizionato staticamente. Almeno FF e IE8 sembrano fare proprio questo.

I test in Safari, tuttavia, mostrano che Safari sembra posizionare l'elemento fixed alla sinistra del suo contenitore. In altre parole, senza posizionamento, il mio elemento position:fixed non è né dove si troverebbe se posizionato staticamente, né è posizionato a 0,0 rispetto al viewport.

Ho fatto affidamento su un comportamento definito molto poco fino ad oggi, e sono forse ricorso a una soluzione JavaScript dopo tutto per ottenere questo posizionamento fisso? Oppure, questo comportamento è ben definito per IE/FF; e qualcuno può spiegare la logica dietro la posizione di Safari per favore?

<style type="text/css"> 
 
    #content-centre { 
 
    margin: 0 auto; 
 
    width: 900px; 
 
    } 
 
    
 
    #header { 
 
    height: 55px; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 990px; 
 
    } 
 
    
 
    #left-pane { 
 
    position: fixed; 
 
    top: 12px; 
 
    border: 1px green solid; 
 
    } 
 
    
 
    #main-pane { 
 
    left: 200px; 
 
    position: relative; 
 
    top: 66px; 
 
    width: 760px; 
 
    border: 1px yellow solid; 
 
    } 
 
    
 
    #container-1 { 
 
    border-top: 1px solid #FFFFFF; 
 
    float: right; 
 
    min-width: 130px; 
 
    padding-left: 20px; 
 
    border: 1px blue solid; 
 
    } 
 
    
 
    #container-0 { 
 
    margin-right: 20px; 
 
    min-height: 470px; 
 
    overflow: auto; 
 
    padding: 10px 0; 
 
    position: relative; 
 
    border: 1px red solid; 
 
    } 
 
    
 
    .side-info-list-fixer { 
 
    position: fixed; 
 
    } 
 
</style> 
 

 
<div id="content-centre"> 
 

 
    <div id="header"> 
 
    </div> 
 

 
    <div id="left-pane"> 
 
    Fixed left pane content 
 
    </div> 
 

 

 
    <div id="main-pane"> 
 
    <div id="page-module-containers"> 
 

 
     <div id="container-1"> 
 
     <div class="side-info-list-fixer"> Fixed right pane content </div> 
 
     </div> 
 

 
     <div id="container-0"> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     <p>Centre scrollable content</p> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

Credo che la risposta che stai cercando è la seguente ...

La posizione di un elemento non di default a 0,0. La sua posizione è impostata per default relativamente all'elemento contenitore, quindi nel tuo esempio "# contenitore-1" ha un padding-left: 20px mentre il resto del padding è impostato su 0 rendendo la posizione "predefinita" dell'elemento 20px a sinistra del muro di # container-1 e la parte superiore è 0px dalla parte superiore di # container-1.

La posizione predefinita di questo elemento per impostazione predefinita e il mio viewport non scostato sarebbe 63px dall'alto e la sinistra dipende ovviamente dalla larghezza del browser. Tuttavia, se non si esegue l'override in alto e a sinistra, sono già definiti dal motore di rendering in primo piano: 63px, a sinistra: 893px.

Quindi, durante il ridimensionamento della finestra, tale posizione viene regolata in modo da riflettere la posizione basata sulla finestra di visualizzazione in modo da scorrere verso il basso per modificare la posizione per mantenerla fissa.

Quindi, semplicemente aggiungendo "position: fixed;" le proprietà sarebbero (per quanto riguarda il browser è in questione) essere il seguente:

position:fixed; 
top:63px; // defined by default during browser rendering in some browsers (based on scroll position on load) 
left:893px; // defined by default during browser rendering in some browsers (based on scroll position/width of browser at time of load) 

Inoltre, IE6 e simili, non supportano position: fixed a tutti. http://fiddle.jshell.net/uaE4g/4/show/

Spero che questo aiuti!

Answer 2

sto vedendo risultati simili in Safari 5, e non in Safari 6.

tutti i browser, sembra funzionare in questo modo:

se una delle proprietà della posizione non è definita su un determinato elemento, il valore iniziale di quella proprietà è lo stesso di se l'oggetto era statico. sembra.

dopo il caricamento della pagina, continua a comportarsi come se fosse statico. quindi se aggiusto un elemento verticalmente, ma non orizzontalmente, posso scorrere su e giù e l'elemento rimane fisso, ma se lo scorrimento lateralmente gli elementi scorrono insieme alla pagina.

ma in safari 5, se l'elemento si trova in un contenitore che ha il posizionamento, sembra comportarsi come si descrive: il valore iniziale è lo stesso come se fosse statico, ma in seguito rimane fisso su quella posizione.

il tuo 'side-info-list-fixer' è all'interno di 'main-pane', che ha posizione: relativa. toglilo e potresti vedere lo stesso comportamento di safari 6 e della maggior parte degli altri browser.

Non so che cosa è corretto e tempo che si dovrebbe dipendere da queste caratteristiche ...

$ 2c, * -pike

Answer 3

ho avuto lo stesso requisito, per posizionare un elemento fixed al suo naturale (impostazione predefinita) static posizione in relazione al viewport. Ho finito per utilizzare questa semplice funzione jQuery.

function SetFixedPositioning(element) { 
    var currentOffset = $(element).offset(); 
    $(element).css("position", "fixed"); 
    $(element).offset(currentOffset);   
} 

usare in questo modo:

SetFixedPosition($("#element-to-position")); 

mio caso d'uso è stato un secondo menu di navigazione di livello che scorreva nel documento, quindi è stato fissato in quella posizione.