Я бачу розбіжність у тому, як фіксована позиціяелементи поводяться в межах відносно розташованого батька. Згідно з документами, які я знаходжу в Інтернеті, FireFox і Chrome повинні фіксувати елемент у вікні перегляду, а не в батьківському. Однак я виявляю, що якщо я не вказав значення ліворуч / праворуч для фіксованого елемента, він поводиться як би змішаний між статичним І фіксованим, в тому сенсі, що він закріплений вертикально до області перегляду, але рухається так, ніби це був статичний елемент у батьківському елементі. Я не можу знайти жодної офіційної / шанованої документації, що стосується цих умов. Всі вони в основному заявляють приблизно наступне:
Фіксоване позиціонування Не залишайте місця для елемента.Натомість розмістіть його у визначеному положенні щодо області перегляду екрана та не переміщуйте під час прокрутки. Під час друку розміщуйте його у фіксованому положенні на кожній сторінці.
З іншого боку, Safari, здається, робить це якце описано там, де він закріплений суто у вікні перегляду, незалежно від того, встановив я для батьківського елемента відносний без будь-яких властивостей зверху / праворуч / знизу / ліворуч. Спробуйте це в Safari, якщо є можливість, натиснувши на чирок div, який розміщує його на -100 пікселів зліва. Жовта смужка залишатиметься фіксованою до області перегляду:
http://jsfiddle.net/bbL8Lh4r/2/
То який браузер правильно відображає це?Усі мої браузери оновлені до останнього. Спочатку я вважав, що Safari був правильним, лише прочитавши документи, але FireFox і Chrome поділяють однаковий погляд, де це, здається, є гібридом між статичним та фіксованим.
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;
}
Відповіді:
11 за відповідь № 1Це видається цікавим випадком. Давайте глибоко заглибимось у специфікації, щоб з’ясувати, що відбувається.
TL; DR: Специфікація W3 критично розмита / невизначена в цій галузі, але, схоже, це всі браузери відхиляються від специфікації, або, принаймні, вони зробили aрішення, де деталі не були визначені. Однак чотири основні браузери (Firefox, Chrome, IE та Opera) об'єднані тим, що всі вони, здається, відхиляються від специфікації так само. Сафарі, безумовно, тут дивна людина.
Це те, що має сказати специфікація CSS2.1 Розділ 9: Модель візуального форматування:
- 9.1.2 Містять блоки - У CSS 2.1, багато позицій та розмірів коробки обчислюються щодо країв прямокутної коробки, яка називається містять блок. Загалом, згенеровані скриньки діють як блоки для нащадкових скриньок; ми говоримо, що поле "встановлює" містять блок для своїх нащадків. Фраза "блок, що містить блок" означає "блок, що містить блок, в якому живе ящик", а не той, який він генерує.
Це просто визначає, що таке блок, що містить.
- 9.3 Схеми позиціонування - Абсолютне позиціонування: У моделі абсолютного позиціонування ящик повністю вилучається із нормального потоку і призначається положення щодо блоку, що містить.
Це говорить абсолютно розташовані елементи розташовані щодо вміщуючого блоку.
- 9.6 Абсолютне позиціонування - У моделі абсолютного позиціонування ящик явно зміщений щодо блоку, що його містить. [...] Посилання в цій специфікації на абсолютно позиціонований елемент (або його поле) означає, що елемент "s
positionвластивість має значенняabsoluteабоfixed.
Це говорить абсолютно розташовані елементи включати position:fixed; елементи, а також position: absolute; елементи
- 9.6.1 Фіксоване позиціонування - Фіксоване позиціонування - це підкатегорія абсолютного позиціонування. Єдина відмінність полягає в тому, що для вікна фіксованого положення блок, що містить, встановлюється вікном перегляду.
І це говорить position: fixed; елементи мають область перегляду (ну, не буквально область перегляду, а вікно з тими самими розмірами та положеннями, що і вікно перегляду), як їх вікно, що містить. Пізніше це підтверджується специфікацією в 10.1 Визначення містять блок</a>:
Якщо елемент має "position: fixed", вміщуючий блок встановлюється вікном перегляду [...]
(Якщо ви не знайомі з тим, що таке область перегляду, це "вікно або інша область перегляду на екрані, через яку користувачі переглядають документ". Розміри області перегляду є основою для початковий містить блок. Весь ваш вміст HTML (<html>, <body>та ін.) знаходиться в межах цього початкового блоку, що містить визначений у вікні перегляду.)
Тому <div class="nav"> елемент з position: fixed; застосований до нього повинен мати містять блок, рівний Viewport, або початковий містить блок.
Тепер перший крок визначення властивостей .nav Елемент завершений, ми можемо визначити, як повинні поводитися браузери.
Специфікація CSS2.1 має таке сказане:
- 9.7 Зв'язок між "дисплеєм", "позицією" та "плаваючою" - В іншому випадку, якщо "позиція" має значення "абсолютна"або "фіксовано", поле абсолютно позиціонується, обчислене значення "float" - "none", а показ відображається відповідно до таблиці нижче. Положення вікна визначатиметься за властивостями "зверху", "праворуч", "знизу" та "ліворуч" та блоком, що містить блок.
Це в основному говорить нам про те, що абсолютно розташовані елементи (position: fixed; або position: absolute;), будь-який float властивості ігноруються, тобто <div> для елементів (серед інших) встановлено значення display: block;, і що елемент позиціонується відповідно до значень зміщення коробки в top, right, bottom, і / або left у поєднанні з початковим блоком, що містить (вікно перегляду).
- 9.3.2 Зсув коробки: "верх", "праворуч", "знизу", "ліворуч" - Кажуть, що елемент позиціонується, якщо йогоВластивість "position" має значення, відмінне від "static". Позиціоновані елементи генерують розміщені вікна, викладені відповідно до чотирьох властивостей: зверху, праворуч, знизу, зліва.
Це просто підтверджує той факт, що <div class="nav"> слід розташовувати відповідно до зміщення коробки.
Хоча в декількох місцях сказано, що якщо є два протилежні значення зміщення auto, тоді вони встановлюються на нуль, CSS2.1, здається, не вказує на те, як розташувати елементи з обома left і right значення нуля. Модуль вирівнювання коробки CSS рівень 3однак згадує, що для значення встановлено значення "старт", яке визначається як:
Вирівнює предмет вирівнювання за рівнем із початковим краєм контейнера для вирівнювання.
Це повинно означати, що елемент розміщений у верхньому лівому куті блоку, що містить, що для position: fixed; елементи, повинні бути такими ж, як і область перегляду. Однак ми можемо бачити, що для всіх основних браузерів це не так. Ні з основних браузерів, схоже, встановлюють position: fixed;"містить блок до блоку перегляду, як вказує специфікація. Натомість усі вони діють так, ніби поведінка повинна бути однаковою між position: fixed; і position: absolute;.
Підводячи підсумок, коли ви маєте стільки доказів за власними словами, відповідь є однозначною: position: fixed; елементи повинні мати містять блок, встановлений уобласть перегляду. Також очевидно, що всі постачальники вирішили заповнити туманну частину специфікації по-своєму, конфліктуючи з цією заявою або відхиляючи її від неї. Найімовірніше, це сталося, що один браузер застосував їх інтерпретацію (IE7 був першим, хто підтримав position: fixed;, Я вважаю, незабаром слідує Firefox 2.0), а решта - за.
3 для відповіді № 2
Читаючи специфікацію W3C, я б сказав, що поведінка в Chrome / FF насправді правильна:
Позиція вікна обчислюється згідно з "абсолютною" моделлю, але крім того, ящик фіксується щодо деякого посилання.
Абсолютні позиції моделі щодо містять блоку:
Положення поля (і, можливо, розмір) задається з властивостями верхнього, правого, нижнього та лівого кутів. Ці властивості визначають зміщення щодо блоку, що містить поле.
EDIT: для елемента фіксованого положення, що містить блок визначається як область перегляду:
Якщо елемент "позиціонує: зафіксовано", вміщуючий блок встановлюється вікном перегляду у випадку безперервного носія
Однак у тому випадку, коли для всіх властивостей розміщення встановлено значення auto, Я не міг знайти жодного визначення, що саме auto має призвести до.Отже, батьківська позиція визначає початкову позицію фіксованого елемента, якщо не вказано жодної іншої позиції. Крім того, елемент залишається фіксованим щодо порту перегляду при прокрутці, як зазначено. Якщо батьківський елемент рухається, фіксований елемент слід рухатись з ним у вихідному положенні; так само, як ви очікували б, що він переміститься, якщо ви змінили left власність
Якщо неправильно переміщати блок із йогобатьків, то неправильно розміщувати його на основі цього батька. Єдина альтернатива - розміщувати його у верхньому лівому куті області перегляду для властивостей auto. Якщо це так, усі браузери неправильно реалізують специфікацію, Safari просто має реалізацію, яка є неправильною та непослідовною.
Варто зазначити, що проявляється поведінка відбувається незалежно від того, чи є батьківський елемент відносно позиційним чи ні.