CSS: позиция: фиксированная внутри позиции: фиксированная

Хорошо, я что-то заметил, но не смог найти его в спецификации CSS. Стилирование элемента с помощью position: fixed будет устанавливать его абсолютно, применительно к окну просмотра браузера. Что произойдет, если вы поместите элемент фиксированной позиции внутри другого? Пример CSS по строкам:

.fixed {
    position: fixed;
    width: 100px;
    height: 100px;
    background: red;
}

#parent { right 100px;  padding: 40px; }

.fixed .fixed { background: blue; }

И HTML:

<div id="parent" class="fixed"> <div class="fixed"> </div> </div>

Насколько я могу судить, элемент фиксирован относительно своего ближайшего родителя, который также фиксирован. Является ли это osbervable во всех браузерах; также, является ли это ошибкой или преднамеренным поведением?

До сих пор я ничего не нашел в этой теме в Интернете, только "фиксированная позиция заставляет ее придерживаться страницы".

Ответы

Ответ 1

Фиксирование и позиционирование - две отдельные вещи. Они расположены так же, как и абсолютно позиционированные элементы: относительно содержащего блок. Но в отличие от абсолютно позиционированных элементов они остаются прикрепленными к этому положению относительно окна просмотра (т.е. Они не перемещаются при прокрутке):

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

Позиция окна вычисляется в соответствии с "абсолютной" моделью, но, кроме того, поле фиксируется относительно некоторой ссылки.

Позиционирование

определение содержащего блока говорит:

Если элемент имеет "position: fixed", содержащий блок устанавливается в окне просмотра в случае непрерывного носителя (...)

и

Если элемент имеет "position: absolute", содержащий блок устанавливается ближайшим предком с "положением" "абсолютного", "относительного" или "фиксированного" (...)

который предполагает, что, хотя их алгоритм позиционирования один и тот же (они оба расположены относительно их блока), содержащий блок для фиксированных элементов всегда является окном просмотра, в отличие от абсолютно позиционированных элементов, поэтому они должны располагаться относительно к этому, а не к каким-либо абсолютно или фиксированным позициям.

И на самом деле это действительно так. Например, если вы добавите top: 20px в .fixed, обе divs будут расположены в 20 пикселях от верхней части окна просмотра. Вложенный фиксированный div не попадает на 20 пикселей вниз от вершины его родителя.

Причина, по которой вы не видите этого в этом случае, состоит в том, что вы фактически не устанавливаете ни одного из свойств left/top/right/bottom, поэтому их позиции определяются положением, которое они будут иметь в потоке (их " статическая позиция" ), который, как я сказал в первой цитате, выполняется в соответствии с абсолютной моделью.

Ответ 2

Я не думаю, что это действительно намерение. Вещи с фиксированным позиционированием расположены по отношению к окну, если у вас есть фиксированный ребенок другого фиксированного, что вы хотите? Вы можете легко дублировать поведение, не только позиционировать оба фиксированных элемента отдельно, либо использовать другое положение, чтобы изменить положение ребенка в фиксированном элементе.: D

Ответ 3

Я не думаю, что в этом есть что-то большее, чем то, что w3c говорит:

Создает абсолютно позиционированный элемент, расположенный относительно браузера. Позиция элемента определяется с помощью "левого", "верхнего", "правый" и "нижний" свойства

Итак, если вы избавитесь от этого "padding: 40px;" вы получите 2 элемента - 1 над другим.

Тот же эффект, как если бы вы позиционировали оба элемента абсолютно сверху: 0 осталось: 0 с одним и тем же родителем (тело).

Ответ 4

Краткий ответ:

Если у вас есть прокручиваемый элемент с фиксированной позицией (например, модальное), и вы хотите сделать фиксированным одно из дочерних элементов (например, кнопку закрытия модального режима), вот решение: вы можете сделать свой элемент не прокручиваемым, и вместо этого создайте дочерний элемент внутри него и сделайте его прокручиваемым (модальный контент, например). таким образом, вы можете применить position: absolute к дочернему элементу, который вы хотите исправить (например, к кнопке модального закрытия), вместо position: fixed.

Длинный ответ:

В моем случае у меня был модал display: fixed, и я применил к нему overflow: auto, чтобы сделать его прокручиваемым. тогда я хотел сделать кнопку закрытия display: fixed.

Вложенность display: fixed работала на Chrome, но не на Firefox. поэтому я изменил свою структуру, удалил overflow: auto из модального режима, чтобы сделать его недоступным для прокрутки, и вместо этого сделал модальный контент прокручиваемым. а также добавил position: absolute, чтобы закрыть кнопку.