修复了 flexbox 项内的元素
Posted
技术标签:
【中文标题】修复了 flexbox 项内的元素【英文标题】：Fixed element inside flexbox item 【发布时间】：2019-09-03 16:49:58 【问题描述】：我在左侧边栏中有一个固定元素。左侧边栏是 flexbox 的一项。
当我将position:fixed; 应用于固定元素时，包含它的弹性框项目会折叠，并且我的固定元素不希望地与我的页面内容重叠。
我尝试使用 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 item中实现固定元素？
【问题讨论】：
我猜你的意思是使用position:sticky 。 fixed和absolute不在文档流中，因此它可能与任何静态或相关元素重叠。
这里的最终目标是什么？固定位置将始终相对于浏览器窗口保持相对于它的父级（即使它的父级是 flexbox），所以我认为这根本不是你想在这里使用的
@G-Cyr 是的，我的意思是position:sticky。谢谢。问题已编辑。
@littletinyman 最终目标：固定元素是一个目录，当页面的其余部分滚动时，该目录保持固定不变。单击目录中的链接将滚动到相应的页面部分。
您没有义务将top:0 与sticky 一起使用，您可以尝试top:20px 例如获得您想要的边距
【参考方案1】：
我尝试使用
position:sticky; top:0;代替，但是粘性元素会不受欢迎地粘在页面顶部。我无法申请保证金。
在使用position:sticky 时认为我们需要使用top:0 是一个常见的错误。而您可以考虑任何您想要的有效值。
对于粘性定位的元素，左、右、上和下是相对于其流盒的相应边缘的偏移量，用于约束元素的偏移量。 left 和 right 的百分比值是指其流框的宽度； top 和 bottom 的百分比值是指其流框的高度。 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?
【讨论】：
以上是关于修复了 flexbox 项内的元素的主要内容，如果未能解决你的问题，请参考以下文章