«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Почему «положение: липкий» и «нижний: 0» напротив описания MDN?

Почему «положение: липкий» и «нижний: 0» напротив описания MDN?

Опубликовано в 2025-04-30
Просматривать:789

Why Does `position: sticky` with `bottom: 0` Behave Opposite to MDN\'s Description?

противоположное поведение позиции: липко с внизу: 0

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

]

cooler { положение: липкий; Внизу: 0; }

footer {
  position: sticky;
  bottom: 0;
}

при прокрутке вниз:

нижний колонтитул начинается как фиксированное положение, затем становится относительно позиционированным, когда нижняя часть нижней колонны достигает 0px с нижней части вида. нижняя часть нижней части нижней части проходит через 0px от нижней части просмотра. превышен. В случае снизу: 0 нижний колонтитул уже находится в нижней части просмотра, когда страница загружается. Таким образом, он начинается в «фиксированном» состоянии, так как порог (0px снизу) уже превышается.
  • Заключение
  • Поэтому при указании позиции: липкий с нижней частью: 0, элемент изначально будет фиксированным позиционированием и переходом в относительную позицию, когда элемент перемещает внизу. Такое поведение противоположно описанному поведению в документации MDN из -за начальной позиции, определяемой структурой HTML и близостью к указанному порогу. ]
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3