我在左侧边栏中有一个固定元素。左侧边栏是flexbox的一项。
当我将position:fixed;应用于固定元素时，包含它的flexbox项会折叠，并且固定元素会不希望地与页面内容重叠。
我尝试使用position:sticky; top:0;代替，但是粘滞元素不希望地粘在页面顶部。我无法申请保证金。
body {
margin: 0;
}
header {
border-bottom: 1px solid;
}
footer {
border-top: 1px solid;
}
#content {
display: flex;
margin: 1.5em;
}
.widget {
width: 300px;
border: 1px solid;
padding: 1.5em;
margin-bottom: 1.5em;
}
#primary {
margin: 0 1.5em;
}
.widget.fixed {
position:fixed;
/*
position: sticky;
top: 0;
*/
}<div id="page">
<header id="masthead">Header</header>
<div id="content">
<aside id="tertiary">
<section class="widget fixed">Fixed Widget</section>
</aside>
<div id="primary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus integer feugiat scelerisque varius morbi. Adipiscing enim eu turpis egestas pretium aenean pharetra magna. Ultricies
leo integer malesuada nunc vel. Nec feugiat nisl pretium fusce. In arcu cursus euismod quis viverra. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tellus mauris a diam maecenas sed enim ut sem. At tellus at urna condimentum
mattis pellentesque. At tempor commodo ullamcorper a lacus. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Laoreet sit amet cursus sit amet dictum. Congue nisi vitae suscipit tellus mauris a. Mi sit amet mauris commodo quis imperdiet
massa tincidunt nunc. Eget magna fermentum iaculis eu. In metus vulputate eu scelerisque felis imperdiet proin. Sit amet consectetur adipiscing elit.</p>
<p>Iaculis urna id volutpat lacus laoreet. Eu scelerisque felis imperdiet proin fermentum leo. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Ligula ullamcorper malesuada proin libero nunc. Mauris in aliquam sem fringilla
ut morbi. At volutpat diam ut venenatis tellus in. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Odio ut sem nulla pharetra. Augue lacus viverra vitae congue eu consequat ac felis donec. Mi bibendum neque egestas congue quisque egestas
diam. Bibendum neque egestas congue quisque. Quisque sagittis purus sit amet. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Malesuada proin libero nunc consequat interdum varius. Facilisis mauris sit amet massa vitae
tortor condimentum lacinia quis. Ac auctor augue mauris augue neque. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Amet facilisis magna etiam tempor.</p>
<p>Massa id neque aliquam vestibulum morbi blandit cursus. Sed blandit libero volutpat sed. Curabitur gravida arcu ac tortor. Accumsan tortor posuere ac ut consequat semper. Est ullamcorper eget nulla facilisi etiam dignissim diam. Nisi est sit amet
facilisis. Congue eu consequat ac felis donec et. Nec ullamcorper sit amet risus nullam. Non pulvinar neque laoreet suspendisse interdum consectetur. Viverra maecenas accumsan lacus vel facilisis. Sapien et ligula ullamcorper malesuada proin libero
nunc. Quis risus sed vulputate odio ut enim blandit volutpat maecenas.</p>
<p>Nisi est sit amet facilisis magna etiam tempor orci. Tristique senectus et netus et malesuada fames. Eu turpis egestas pretium aenean. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Cras semper auctor neque vitae tempus quam pellentesque.
Cursus in hac habitasse platea. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Ornare suspendisse sed nisi lacus sed viverra tellus. Convallis posuere morbi leo urna molestie at. Accumsan in nisl nisi scelerisque eu ultrices
vitae auctor. Massa enim nec dui nunc mattis enim. Vel turpis nunc eget lorem. Ac placerat vestibulum lectus mauris. Suspendisse in est ante in nibh. Ipsum a arcu cursus vitae congue mauris. Curabitur vitae nunc sed velit dignissim. Proin sagittis
nisl rhoncus mattis. Arcu odio ut sem nulla pharetra diam sit.</p>
</div>
<aside id="secondary">
<section class="widget">Widget</section>
<section class="widget">Widget</section>
<section class="widget">Widget</section>
</aside>
</div>
<footer id="colophon">Footer</footer>
</div>
如何在flexbox项中实现固定元素？
答案 0 :(得分：1)
我尝试使用
position:sticky; top:0;代替，但是粘滞元素不希望地粘在页面顶部。我无法申请保证金。
使用top:0时我们认为需要使用position:sticky是一个常见的错误。而您可以考虑所需的任何有效值。
对于粘性放置的元素，左，右，顶部和底部是其流框各自边缘的偏移量，用于限制元素的偏移量。左侧和右侧的百分比值是指其流框的宽度。顶部和底部的百分比值表示其流框的高度。 ref
因此，您可以简单地使用top:X，其中X是您为容器定义的边距：
body {
margin: 0;
}
header {
border-bottom: 1px solid;
}
footer {
border-top: 1px solid;
}
#content {
display: flex;
margin: 1.5em;
}
.widget {
width: 300px;
border: 1px solid;
padding: 1.5em;
margin-bottom: 1.5em;
}
#primary {
margin: 0 1.5em;
}
.widget.fixed {
position: sticky;
top: 1.5em;
}<div id="page">
<header id="masthead">Header</header>
<div id="content">
<aside id="tertiary">
<section class="widget fixed">Fixed Widget</section>
</aside>
<div id="primary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus integer feugiat scelerisque varius morbi. Adipiscing enim eu turpis egestas pretium aenean pharetra magna. Ultricies
leo integer malesuada nunc vel. Nec feugiat nisl pretium fusce. In arcu cursus euismod quis viverra. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tellus mauris a diam maecenas sed enim ut sem. At tellus at urna condimentum
mattis pellentesque. At tempor commodo ullamcorper a lacus. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Laoreet sit amet cursus sit amet dictum. Congue nisi vitae suscipit tellus mauris a. Mi sit amet mauris commodo quis imperdiet
massa tincidunt nunc. Eget magna fermentum iaculis eu. In metus vulputate eu scelerisque felis imperdiet proin. Sit amet consectetur adipiscing elit.</p>
<p>Iaculis urna id volutpat lacus laoreet. Eu scelerisque felis imperdiet proin fermentum leo. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Ligula ullamcorper malesuada proin libero nunc. Mauris in aliquam sem fringilla
ut morbi. At volutpat diam ut venenatis tellus in. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Odio ut sem nulla pharetra. Augue lacus viverra vitae congue eu consequat ac felis donec. Mi bibendum neque egestas congue quisque egestas
diam. Bibendum neque egestas congue quisque. Quisque sagittis purus sit amet. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Malesuada proin libero nunc consequat interdum varius. Facilisis mauris sit amet massa vitae
tortor condimentum lacinia quis. Ac auctor augue mauris augue neque. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Amet facilisis magna etiam tempor.</p>
<p>Massa id neque aliquam vestibulum morbi blandit cursus. Sed blandit libero volutpat sed. Curabitur gravida arcu ac tortor. Accumsan tortor posuere ac ut consequat semper. Est ullamcorper eget nulla facilisi etiam dignissim diam. Nisi est sit amet
facilisis. Congue eu consequat ac felis donec et. Nec ullamcorper sit amet risus nullam. Non pulvinar neque laoreet suspendisse interdum consectetur. Viverra maecenas accumsan lacus vel facilisis. Sapien et ligula ullamcorper malesuada proin libero
nunc. Quis risus sed vulputate odio ut enim blandit volutpat maecenas.</p>
<p>Nisi est sit amet facilisis magna etiam tempor orci. Tristique senectus et netus et malesuada fames. Eu turpis egestas pretium aenean. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Cras semper auctor neque vitae tempus quam pellentesque.
Cursus in hac habitasse platea. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Ornare suspendisse sed nisi lacus sed viverra tellus. Convallis posuere morbi leo urna molestie at. Accumsan in nisl nisi scelerisque eu ultrices
vitae auctor. Massa enim nec dui nunc mattis enim. Vel turpis nunc eget lorem. Ac placerat vestibulum lectus mauris. Suspendisse in est ante in nibh. Ipsum a arcu cursus vitae congue mauris. Curabitur vitae nunc sed velit dignissim. Proin sagittis
nisl rhoncus mattis. Arcu odio ut sem nulla pharetra diam sit.</p>
</div>
<aside id="secondary">
<section class="widget">Widget</section>
<section class="widget">Widget</section>
<section class="widget">Widget</section>
</aside>
</div>
<footer id="colophon">Footer</footer>
</div>
有关更多示例的相关问题，并了解我们可以使用bottom：Why element with position:sticky doesn't stick to the bottom of parent?