Мобильная версияЗакрепленное позиционирование похоже на относительное позиционирование, за исключением того, что смещения автоматически рассчитываются относительно ближайшего порта прокрутки.
Для закрепленного позиционируемого блока свойства вставки представляют собой вставки из соответствующие края ближайшего порта прокрутки, определяющие закрепленный прямоугольник представления, используемый для ограничения положения поля.
Кроме того, спецификация CSS определяет порт прокрутки и ближайший порт прокрутки следующим образом:
Визуальная «область просмотра» контейнера прокрутки (через которую можно просматривать прокручиваемую область переполнения) совпадает с ее полем заполнения и называется портом прокрутки. Ближайший порт прокрутки к блоку — это порт прокрутки его ближайшего предка-контейнера прокрутки.
Заполнители в коде нужны только для того, чтобы прилипание и прокрутка поведение элемента .sticky можно ясно увидеть.
Рассмотрим следующий фрагмент кода:
Код: Выделить всё
.scrollport {
width: 70%;
height: 250px;
overflow: auto;
}
.filler {
height: 110%;
background-color: aqua;
}
.container-filler {
height: 100px;
background-color: red;
}
.sticky {
position: sticky;
top: 0px;
bottom: 0px;
border: 3px solid slateblue;
}Код: Выделить всё
Sticky Element
Для приведенного выше кода сверху и снизу< Вставки /code> установлены на 0 пикселей, края SVR совпадают с областью прокрутки. Следовательно, при достижении порогового значения элемент .sticky прикрепляется до тех пор, пока он не будет достигает своего нормального положения (внизу: 0 пикселей) или достигает границы своего контейнера (вверху: 0 пикселей), после чего он прокручивается вместе со своим контейнером.
Теперь рассмотрим следующий фрагмент с отступом, добавленным к элементу .scrollport.
Код: Выделить всё
.scrollport {
width: 70%;
height: 250px;
padding: 20px 0; /* added top and bottom padding */
overflow: auto;
}
.filler {
height: 110%;
background-color: aqua;
}
.container-filler {
height: 100px;
background-color: red;
}
.sticky {
position: sticky;
top: 0px;
bottom: 0px;
border: 3px solid slateblue;
}Код: Выделить всё
Sticky Element
Как можно заметить, когда верхнее и нижнее отступы добавлен в .scrollport, элемент .sticky не прилипает к заданному порогу.
Края SVR не совпадают с краями области прокрутки. Верхнее отступ прижимает верхний край SVR вниз, тогда как нижнее отступ подталкивает нижний край SVR вверх.
Как уже говорилось выше, для формирования SVR вставки применяются относительно друг друга. к соответствующим краям ближайшего порта прокрутки, а порт прокрутки совпадает с полем заполнения контейнера прокрутки.
Это означает, что добавленное дополнение к порт прокрутки не должен влиять на положение SVR. В любом случае, как сверху: 0px, так и снизу: 0px, позиция SVR должна совпадать с областью прокрутки (или, другими словами, с ее полем заполнения).
Вместо этого вставки применяются с учетом заполнения. Следовательно, вставки эффективно позиционируют SVR относительно поля содержимого области прокрутки и нет в поле заполнения области прокрутки.
Вопрос
Итак, разве такое поведение не наблюдается в Sticky Positioning Scheme формирования SVR противоречит тому, что на самом деле указано в спецификации CSS?
Или я просто неправильно интерпретирую спецификацию и такое поведение ожидаемо? Если это так, может ли кто-нибудь объяснить, где я ошибаюсь?
Кроме того, документировано ли это где-нибудь в спецификации?
Подробнее здесь: https://stackoverflow.com/questions/783 ... position-o
