#html #css
#HTML #css
Вопрос:
Насколько я понимаю, если элемент с position:sticky вложен в родительский элемент: когда родитель покидает область просмотра, этот «липкий» элемент уйдет вместе с ним.
Здесь у меня есть «липкий» <ul> внутри <nav> внутри <main> . При прокрутке основного элемента, когда <nav> он обычно прокручивается за пределами экрана, он вместо этого ведет себя так, как будто он стал position:sticky . Однако, если я изменю значение display <nav> на либо block или inline-block , оно будет вести себя так, как я и думал. Что здесь происходит?
body {
border: 2px dotted gray;
padding: 2rem;
}
nav {
display: inline;
}
ul {
top: 0;
position: sticky;
width: 100%;
list-style: none;
padding: 1rem 0;
display: flex;
gap: 1rem;
font-weight: bold;
border: 2px dotted gray;
background: white;
} <body>
<main>
<nav>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
<h1>Main Heading</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis enim ipsum. Quisque vel lacinia urna. Aenean et cursus nisi. Mauris eleifend fermentum elit, id finibus sem varius id. Duis imperdiet massa at velit ultrices gravida id sit amet ipsum. Praesent convallis quis metus nec dignissim. Etiam et odio id odio tincidunt bibendum quis vel urna. Cras ultricies diam eget nisl posuere, vel mollis sapien venenatis. Nulla eu diam hendrerit, gravida dolor vitae, cursus nulla.</p>
<p>Maecenas vulputate viverra diam elementum volutpat. Sed vulputate ac velit et tincidunt. Mauris eget nisl ut mauris eleifend accumsan. Phasellus accumsan ultricies leo, vitae gravida tellus rutrum sed. Proin condimentum pulvinar rhoncus. Duis quis massa ligula. Cras ac est aliquet, facilisis leo nec, scelerisque arcu. Nunc ultricies sollicitudin semper. Nulla varius laoreet posuere. Suspendisse hendrerit nulla id mi rhoncus iaculis. Donec interdum ultricies risus, eget malesuada justo pellentesque placerat. Cras convallis eget dolor in tempus. Ut imperdiet tellus eu nibh bibendum rutrum.</p>
<p>Integer eros purus, porta non rhoncus a, accumsan et lectus. Ut a ullamcorper purus. Proin mattis fermentum lorem varius mollis. Nullam imperdiet, neque auctor sodales molestie, nulla enim suscipit leo, id cursus nibh quam vel neque. Curabitur mauris nunc, varius id pharetra sed, elementum nec tellus. Morbi luctus auctor egestas. Cras accumsan arcu ullamcorper porttitor imperdiet. Sed semper magna nec nibh venenatis, sed laoreet neque malesuada. Aenean sit amet erat molestie, efficitur lacus vitae, laoreet lectus. Proin elit enim, ultrices nec nibh eget, vehicula maximus odio. Nunc egestas dapibus porta. Mauris aliquet bibendum ultrices.</p>
<p>Praesent efficitur sit amet magna bibendum bibendum. In convallis nisl aliquam vulputate gravida. Praesent ornare pretium dapibus. Aliquam malesuada in metus eget eleifend. Morbi at cursus augue, sed sagittis dolor. Pellentesque facilisis urna metus, et maximus risus tristique et. Cras blandit condimentum pulvinar. Fusce mattis egestas tortor, ut aliquam libero ultrices eu. Praesent mauris enim, egestas id tristique in, mollis in tellus. Integer tristique augue quis lorem facilisis, non convallis lorem consequat. Morbi sagittis at mi ac finibus. Vivamus eget diam nec quam lobortis viverra. Morbi viverra ut odio non vehicula.</p>
<p>Proin faucibus tortor quis nisl placerat, eget commodo ante iaculis. Proin quis aliquam ante, a iaculis nisi. Vivamus porta mi et neque ullamcorper mattis. Suspendisse cursus, urna et placerat posuere, risus arcu tempor nunc, eget hendrerit nulla ex maximus ante. Morbi elit mauris, vestibulum vel elementum et, mattis non quam. Quisque aliquet congue quam, id dictum nunc scelerisque in. Mauris ipsum risus, vestibulum venenatis lorem vitae, porta semper ante. Aliquam eu velit vitae neque iaculis vestibulum id a magna. Integer malesuada at lacus ac vulputate.</p>
</div>
</main>
</body> Комментарии:
1. Я не уверен, где вы читали о sticky position, но согласно w3schools.com/css/css_positioning.asp , кажется, это по-другому.
2. @kiner_shah В их примере HTML, если вы обернете их div с помощью class
sticky, так, чтобы он находился внутри другого div (например<div><div class="sticky">I am sticky!</div></div>, он перестанет вести себя так, как будто он привязан к позиции. Если вы затем добавитеdisplay:inlineк этому обертке div, он будет вести себя так, как будто он снова привязан к позиции, но родительский «обертка div» также перемещается вниз по странице вместе с ним. Вы можете делать это несколько раз, пока все родители естьdisplay:inline, но если есть одинdisplay:block, илиinline-blockон перестанет работать.
Ответ №1:
Все дело в «содержащем блоке». sticky position не учитывает родительский элемент, но рассматривает содержащий его блок, который в большинстве случаев является родительским элементом, но в вашем случае это не потому, что:
Для других элементов, если позиция элемента «относительная» или «статическая», содержащий блок формируется краем содержимого ближайшего окна-предка, которое является контейнером блоков или устанавливает контекст форматирования. ссылка
sticky там не упоминается, но он ведет себя так же, как relative и static (https://www.w3.org/TR/css-position-3/#def-cb )
Если вы проверите определение sticky, вы можете прочитать:
Идентично relative, за исключением того, что его смещения автоматически корректируются в зависимости от области прокрутки контейнера прокрутки ближайшего предка (измененной свойствами вставки) в зависимости от того, какие оси свойства вставки не являются автоматическими, чтобы попытаться сохранить поле в поле зрения внутри содержащего его блока при прокрутке пользователя. Эта схема позиционирования называется sticky positioning . ссылка
Итак, содержащий блок в вашем случае — это не что иное nav , как main
Комментарии:
1.Ах, спасибо. Я был уверен, что где-то прочитал «родительский элемент» и нашел в MDN, что их номенклатура, возможно, сбила меня с толку. «Элемент с липким расположением рассматривается как относительно расположенный, пока он не пересечет указанный порог, после чего он рассматривается как фиксированный, пока не достигнет границы своего родителя«.но ранее на странице указано: «sticky — элемент позиционируется в соответствии с обычным потоком документа, а затем смещается относительно его ближайшего предка прокрутки и содержит блок …« developer.mozilla.org/en-US/docs/Web/CSS/position