Vidím rozpor v tom, ako pevná polohaprvky sa správajú v rámci relatívne umiestneného rodiča. Podľa dokumentov, ktoré nachádzam online, by FireFox a Chrome mali opraviť prvok vo výreze, a nie rodič. Zistil som však, že ak nezadám ľavú / pravú hodnotu na pevnom prvku, správa sa akousi kombináciou statického A pevného v tom zmysle, že je pripevnený vertikálne k výrezu, ale pohybuje sa akoby bol to statický prvok v rámci nadradeného prvku. Nemôžem nájsť žiadnu oficiálnu / rešpektovanú dokumentáciu týkajúcu sa týchto podmienok. Všetci v zásade uvádzajú niečo ako toto:
Pevné umiestnenie Nenechávajte prvok voľný priestor.Namiesto toho ho umiestnite na určené miesto vzhľadom na výrez obrazovky a pri rolovaní ho nehýbte. Pri tlači ju umiestnite na túto pevnú pozíciu na každej stránke.
Na druhej strane sa zdá, že Safari to vykresľuje akoje to popísané tam, kde je to fixované čisto na výrez, bez ohľadu na to, či nastavím nadradený element na relatívny bez definovaných vlastností hore / vpravo / dole / vľavo. Vyskúšajte to v Safari, ak máte šancu kliknutím na zelenomodrú div, ktorý ju umiestňuje -100 pixelov zľava. Žltá lišta zostane fixná k zobrazenému oknu:
http://jsfiddle.net/bbL8Lh4r/2/
Ktorý prehliadač to teda vykresľuje správne?Všetky moje prehľadávače boli aktualizované na najnovšiu verziu. Spočiatku som si myslel, že Safari je ten pravý už pri čítaní dokumentov, ale FireFox aj Chrome zdieľajú rovnaký rozdielny pohľad, kde sa javí ako hybrid medzi statickým a pevným.
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;
}
odpovede:
11 pre odpoveď č. 1Toto sa javí ako zaujímavý prípad. Poďme sa hlboko ponoriť do špecifikácií a zistiť, o čo ide.
TL; DR: Špecifikácia W3 je v tejto oblasti kriticky neurčitá / nedefinovaná, ale zdá sa, že všetky prehliadače odchýliť sa od špecifikácie, alebo aspoň vyrobili arozhodnutie, kde boli nedefinované podrobnosti. Štyri hlavné prehliadače (Firefox, Chrome, IE a Opera) sú však zjednotené v tom, že sa zdajú byť odlišné od špecifikácie rovnakym sposobom. Safari je tu určite zvláštny človek.
To je to, v čom musí povedať špecifikácia CSS2.1 Kapitola 9: Vizuálny formátovací model:
- 9.1.2 Obsahujúce bloky - V CSS 2.1 sa počíta veľa polôh a veľkostí škatule vzhľadom na okraje obdĺžnikovej škatule nazývanej blok obsahujúci. Generované boxy vo všeobecnosti fungujú ako bloky obsahujúce potomkove boxy; hovoríme, že schránka „ustanovuje“ obsahujúci blok pre svojich potomkov. Fráza „blok obsahujúci blok“ znamená „blok obsahujúci blok, v ktorom žije“, nie ten, ktorý generuje.
Toto iba definuje, čo je blok obsahujúci.
- 9.3 Schémy umiestnenia - Absolútne umiestnenie: V modeli absolútneho umiestnenia je rámček úplne odstránený z normálneho toku a je mu priradená pozícia vzhľadom na blok obsahujúci.
To hovorí absolútne umiestnené prvky sú umiestnené vzhľadom na blok obsahujúci.
- 9.6 Absolútne umiestnenie - V modeli absolútneho umiestnenia je rámček explicitne posunutý vzhľadom na jeho blok obsahujúci. [...] Odkazy v tejto špecifikácii na absolútne umiestnený prvok (alebo jeho políčko) znamená, že prvok „s
positionvlastnosť má hodnotuabsolutealebofixed.
To hovorí absolútne umiestnené prvky zahrnúť position:fixed; prvky ako aj position: absolute; prvky.
- 9.6.1 Pevné umiestnenie - Fixné umiestnenie je podkategória absolútneho umiestnenia. Jediný rozdiel je v tom, že pre rám s pevnou pozíciou je obsahujúci blok vytvorený výrezom.
A toto hovorí position: fixed; prvky majú Výrez (teda nie doslova výrez, ale rámček s rovnakými rozmermi a pozíciami ako výrez) ako ich obsahujúci rámček. To je podporené neskôr špecifikáciou 10.1 Definícia obsahujúceho bloku</a>:
Ak má prvok „position: fixed“, obsahujúci blok sa vytvorí pomocou výrezu [...]
(Ak neviete, čo je to výrez, je to „okno alebo iná zobrazovacia oblasť na obrazovke, cez ktorú používatelia prezerajú dokument.“ Rozmery výrezu sú základom pre blok. Celý obsah HTML (<html>, <body>, atď.) sa nachádza v tomto počiatočnom bloku obsahujúcom blok definovaný výrezom.)
Z tohto dôvodu <div class="nav"> element s position: fixed; použitý na ňu by mal mať obsahujúci blok rovný výrezu alebo blok.
Teraz, keď je prvým krokom k určeniu vlastností .nav element je kompletný, môžeme určiť, ako sa majú prehliadače správať.
V špecifikácii CSS2.1 sa hovorí:
- 9.7 Vzťahy medzi „display“, „position“ a „float“ - V opačnom prípade, ak má „pozícia“ hodnotu „absolútny“alebo „pevné“, rámček je absolútne umiestnený, vypočítaná hodnota „plaváka“ je „žiadna“ a zobrazenie sa nastavuje podľa nasledujúcej tabuľky. Pozícia poľa bude určená vlastnosťami „hore“, „vpravo“, „dole“ a „vľavo“ a blokom obsahujúcim pole.
Toto nám v podstate hovorí, že pre absolútne umiestnené prvky (position: fixed; alebo position: absolute;), akýkoľvek float vlastnosti sú ignorované, že <div> prvky (okrem iných) sú nastavené na display: block;, a že je prvok umiestnený podľa jeho hodnôt posunu poľa o top, right, bottom, a / alebo left v kombinácii s počiatočným obsahujúcim blokom (výrez).
- 9.3.2 Korekcie boxu: „hore“, „vpravo“, „dole“, „vľavo“ - O prvku sa hovorí, že je umiestnený, ak jeVlastnosť „position“ má inú hodnotu ako „static“. Umiestnené prvky generujú umiestnené polia rozložené podľa štyroch vlastností: horná, pravá, spodná, ľavá.
Toto len potvrdzuje skutočnosť, že <div class="nav"> by mali byť umiestnené v súlade s jeho odsadeniami.
Aj keď sa na viacerých miestach hovorí, že ak sú dve protichodné hodnoty offsetu auto, potom sú nastavené na nulu, zdá sa, že CSS2.1 neurčuje prípad, ako umiestniť prvky do oboch left a right hodnoty nula. Modul zarovnania CSS boxu úrovne 3, avšak uvádza, že hodnota je nastavená na „štart“, ktorá je definovaná ako:
Zarovná zarovnaný predmet tak, aby bol zarovnaný s počiatočnou hranou vyrovnávacej nádoby.
To by malo znamenať, že prvok je umiestnený v ľavom hornom rohu obsahujúceho bloku, ktorý pre position: fixed; prvky by mali byť rovnaké ako výrez. Vidíme však, že pre všetky hlavné prehliadače to tak nie je. nikto Zdá sa, že jeden z hlavných prehľadávačov nastavuje position: fixed;Blok obsahuje blok výrezu podľa pokynov špecifikácie. Namiesto toho všetci konajú, akoby malo byť správanie medzi position: fixed; a position: absolute;.
Na záver možno zhrnúť, že ak máte toľko dôkazov podľa vlastných slov, odpoveď je jasná: position: fixed; prvky by mali mať blok obsahujúci nastavený navýrez. Jasné tiež je, že predajcovia sa všetci rozhodli svojpomocne vyplniť vágnu časť špecifikácie, čo je v rozpore s týmto vyhlásením alebo ho priamo ignorujú. S najväčšou pravdepodobnosťou sa stalo, že jeden interpret implementoval ich interpretáciu (IE7 podporoval ako prvý position: fixed;„Verím, že čoskoro nasleduje Firefox 2.0) a zvyšok nasleduje.
3 pre odpoveď č. 2
Po prečítaní špecifikácie W3C by som povedal, že správanie v prehliadači Chrome / FF je skutočne správne:
Poloha boxu sa počíta podľa „absolútneho“ modelu, navyše je box fixný vzhľadom na nejaký odkaz.
Absolútne pozície modelu vzhľadom na blok obsahujúci:
Pozícia (a možno aj veľkosť) poľa je určená hornými, pravými, spodnými a ľavými vlastnosťami. Tieto vlastnosti určujú posunutia vzhľadom na blok obsahujúci pole.
EDIT: Pre prvok s pevnou pozíciou obsahujúci blok je definované ako výrez:
Ak má prvok „positioned: fixed“, výrezom sa v prípade spojitého média vytvorí obsahujúci blok
Avšak v prípade, keď sú všetky pozičné vlastnosti nastavené na auto, Nemohol som nájsť žiadnu definíciu presne toho, čo auto by malo mať za následok.Preto pozícia rodiča definuje počiatočnú polohu pevného prvku, ak nie je daná iná poloha. Okrem toho prvok pri rolovaní zostane pevný, pokiaľ ide o port pohľadu, ako je uvedené. Ak sa rodič pohybuje, pevný prvok by sa s ním mali pohybovať v počiatočnej polohe; rovnako, ako by ste čakali, že sa pohne, ak zmeníte left vlastnosť.
Ak je nesprávne presunúť blok s jehorodič, potom je nesprávne umiestniť ho na základe tohto rodiča. Jedinou alternatívou je umiestniť ho do ľavého horného rohu výrezu pre vlastnosti auto. Ak je to tak, všetky prehliadače implementujú špecifikáciu nesprávne, Safari má implementáciu, ktorá je nesprávna a nekonzistentná.
Stojí za zmienku, že k prejavenému správaniu dochádza bez ohľadu na to, či je nadradený prvok relatívne umiestnený.