Vedo una discrepanza nel modo in cui fissa la posizionegli elementi si comportano all'interno di un genitore relativamente posizionato. Secondo i documenti che trovo online, FireFox e Chrome dovrebbero correggere l'elemento nel viewport e non nel genitore. Tuttavia, trovo che se non specifichi un valore sinistra / destra su un elemento fisso, si comporta in una sorta di mix tra statico E fisso, nel senso che è fissato verticalmente rispetto alla finestra, ma si muove come se era un elemento statico all'interno dell'elemento genitore. Non riesco a trovare alcuna documentazione ufficiale / rispettata che circonda queste condizioni. Fondamentalmente affermano tutti qualcosa di simile al seguente:
Posizionamento fisso Non lasciare spazio per l'elemento. Invece, posizionalo in una posizione specificata rispetto alla visualizzazione dello schermo e non spostarlo durante lo scorrimento. Quando si stampa, posizionarlo in quella posizione fissa su ogni pagina.
Safari d'altra parte, sembra renderlo comeè descritto dove è fissato esclusivamente al viewport, non importa se ho impostato un elemento genitore su relativo senza alcuna proprietà in alto / a destra / in basso / a sinistra definita. Provalo in Safari se ne hai la possibilità facendo clic sull'icona verde acqua div che lo posiziona a -100 pixel da sinistra. La barra gialla rimarrà fissa al viewport:
http://jsfiddle.net/bbL8Lh4r/2/
Quindi quale browser lo sta visualizzando correttamente? Tutti i miei browser sono stati aggiornati all'ultima. All'inizio pensavo che Safari fosse quello giusto solo leggendo i documenti, ma FireFox e Chrome condividono entrambi la stessa vista diversa in cui sembra essere un ibrido tra statico e fisso.
HTML
<body>
<aside>
Blah
</aside>
<div class="container">
<div class="nav">
BLARGH
</div>
</div>
</body>
CSS
body,
aside,
.container,
.nav {
margin:0;
padding:0;
}
aside {
background:red;
width:30%;
height:800px;
float:left;
}
.container {
position:relative;
height:800px;
width:70%;
background:teal;
float:right;
}
.container.stickied {
left:-100px;
}
.container .nav {
position:fixed;
background:yellow;
width:inherit;
}
risposte:
11 per risposta № 1Questo sembra essere un caso interessante. Facciamo un tuffo profondo nelle specifiche per scoprire cosa sta succedendo.
TL; DR: La specifica W3 è criticamente vaga / indefinita in quest'area, ma sembra così tutti i browser deviano dalle specifiche, o almeno, hanno fatto adecisione in cui i dettagli erano indefiniti. Tuttavia, quattro dei principali browser (Firefox, Chrome, IE e Opera) sono uniti in quanto sembrano tutti deviare dalle specifiche nello stesso modo. Safari è sicuramente l'uomo strano qui fuori.
Questo è ciò che la specifica CSS2.1 ha da dire in Capitolo 9: Modello di formattazione visuale:
- 9.1.2 Contenitori di blocchi - In CSS 2.1, molte posizioni e dimensioni della scatola sono calcolate rispetto ai bordi di una scatola rettangolare chiamata blocco contenitore. In generale, i riquadri generati fungono da blocchi di contenimento per i riquadri discendenti; diciamo che una scatola "stabilisce" il blocco contenitore per i suoi discendenti. La frase "una scatola" contiene un blocco "significa" il blocco contenitore in cui risiede la scatola ", non quello che genera.
Questo definisce semplicemente cos'è un blocco contenitore.
- 9.3 Schemi di posizionamento - Posizionamento assoluto: nel modello di posizionamento assoluto, una scatola viene rimossa completamente dal flusso normale e assegnata una posizione rispetto a un blocco contenitore.
Questo dice elementi assolutamente posizionati sono posizionati rispetto a un blocco contenitore.
- 9.6 Posizionamento assoluto - Nel modello di posizionamento assoluto, un box è esplicitamente sfalsato rispetto al suo blocco contenitore. [...] Riferimenti in questa specifica a un elemento assolutamente posizionato (o il suo riquadro) implica che l'elemento "s
positionla proprietà ha il valoreabsoluteofixed.
Questo dice elementi assolutamente posizionati includere position:fixed; elementi così come position: absolute; elementi.
- 9.6.1 Posizionamento fisso - Il posizionamento fisso è una sottocategoria del posizionamento assoluto. L'unica differenza è che per un box a posizione fissa, il blocco contenitore è stabilito dal viewport.
E questo dice position: fixed; gli elementi hanno il Viewport (beh, non letteralmente il viewport, ma un box con le stesse dimensioni e posizioni del viewport) come box contenitore. Questo è supportato in seguito dalle specifiche in 10.1 Definizione di blocco contenitore</a>:
Se l'elemento ha "position: fixed", il blocco contenitore è stabilito dal viewport [...]
(Se non hai familiarità con cosa sia il viewport, è "una finestra o un'altra area di visualizzazione sullo schermo attraverso il quale gli utenti consultano un documento". Le dimensioni del viewport sono la base per il blocco iniziale contenente. L'intero contenuto HTML (<html>, <body>, ecc.) risiede all'interno di questo blocco contenitore iniziale definito dal viewport.)
quindi, il <div class="nav"> elemento con position: fixed; applicato ad esso dovrebbe avere un blocco contenitore uguale al Viewport, o il blocco iniziale contenente.
Ora che il primo passo per determinare le proprietà del file .nav l'elemento è completo, possiamo determinare come dovrebbero comportarsi i browser.
La specifica CSS2.1 ha questo da dire:
- 9.7 Relazioni tra "display", "position" e "float" - Altrimenti, se "posizione" ha il valore "assoluto"o "fisso", la casella è posizionata in modo assoluto, il valore calcolato di "float" è "nessuno" e la visualizzazione è impostata secondo la tabella sottostante. La posizione del box sarà determinata dalle proprietà "top", "right", "bottom" e "left" e dal blocco contenente il box.
Questo fondamentalmente ci sta dicendo che, per elementi assolutamente posizionati (position: fixed; o position: absolute;), qualunque float le proprietà vengono ignorate, questo <div> elementi (tra gli altri) sono impostati su display: block;e che l'elemento è posizionato in base ai valori di offset del riquadro di top, right, bottom, e / o left in combinazione con il blocco contenitore iniziale (il viewport).
- 9.3.2 Offset riquadro: "in alto", "a destra", "in basso", "a sinistra" - Si dice che un elemento sia posizionato se èLa proprietà "position" ha un valore diverso da "static". Gli elementi posizionati generano riquadri posizionati, disposti secondo quattro proprietà: in alto, a destra, in basso, a sinistra.
Questo ribadisce solo il fatto che <div class="nav"> deve essere posizionato in base ai suoi offset di scatola.
Anche se in diversi punti si dice che se due valori di offset opposti sono auto, quindi sono impostati a zero, CSS2.1 non sembra specificare il caso di come posizionare gli elementi con entrambi left e right valori di zero. Modulo CSS Box Alignment Livello 3, tuttavia, menziona che il valore è impostato su "start", che è definito come:
Allinea il soggetto dell'allineamento in modo che sia a filo con il bordo iniziale del contenitore dell'allineamento.
Ciò dovrebbe significare che l'elemento è posizionato in alto a sinistra del blocco contenitore, che, per position: fixed; elementi, dovrebbe essere lo stesso del viewport. Tuttavia, possiamo vedere che, per tutti i principali browser, questo non è il caso. Nessuna dei principali browser sembra impostare l'estensione position: fixed;"contengono un blocco a quello della visualizzazione come indicato dalle specifiche. Invece, si comportano tutti come se il comportamento dovesse essere identico tra position: fixed; e position: absolute;.
In sintesi, quando si hanno così tante prove nelle stesse parole della specifica, la risposta è chiara: position: fixed; gli elementi dovrebbero avere un blocco contenitore impostato suil viewport. Ciò che è anche chiaro è che i fornitori hanno tutti deciso di compilare una parte vaga delle specifiche a modo loro, in conflitto o ignorando completamente questa dichiarazione. Ciò che è molto probabile che sia successo è che un browser abbia implementato la loro interpretazione (IE7 è stato il primo a supportare position: fixed;, Credo, seguito a breve da Firefox 2.0) e il resto è seguito.
3 per risposta № 2
Leggendo le specifiche W3C, direi che il comportamento in Chrome / FF è effettivamente corretto:
La posizione della scatola è calcolata secondo il modello "assoluto", ma in più la scatola è fissa rispetto a qualche riferimento.
Le posizioni assolute del modello rispetto al blocco contenitore:
La posizione della casella (e possibilmente la dimensione) è specificata con le proprietà in alto, a destra, in basso e a sinistra. Queste proprietà specificano gli offset rispetto al blocco che la contiene.
EDIT: per un elemento a posizione fissa, il file contenente il blocco è definito come il viewport:
Se l'elemento ha "posizionato: fisso", il blocco contenitore è stabilito dal viewport nel caso di media continui
Tuttavia, nel caso in cui tutte le proprietà di posizione siano impostate su auto, Non sono riuscito a trovare alcuna definizione di cosa esattamente auto dovrebbe risultare. Pertanto, la posizione del genitore definisce la posizione iniziale dell'elemento fisso se non viene data nessun'altra posizione. Inoltre, l'elemento rimane fisso rispetto alla porta di visualizzazione quando viene fatto scorrere, come specificato. Se il genitore si sposta, l'elemento fisso dovrebbe muoversi con la sua posizione iniziale con essa; lo stesso che ti aspetteresti che si sposti se cambiassi il file left proprietà.
Se non è corretto spostare il blocco con il suogenitore, quindi non è corretto posizionarlo in base a quel genitore in primo luogo. L'unica alternativa è posizionarlo nell'angolo superiore sinistro della visualizzazione per le proprietà di auto. Se questo è il caso, tutti i browser implementano le specifiche sbagliate, Safari ha solo un'implementazione sbagliata e incoerente.
Vale la pena notare che il comportamento mostrato si verifica indipendentemente dal fatto che l'elemento genitore sia posizionato relativamente o meno.