html - flexbox 元素内的固定元素

Question

我在左侧边栏中有一个固定元素。左侧边栏是 flexbox 的一个元素。

当我将 position:fixed; 应用到固定元素时，包含它的 flexbox 元素会折叠并且我的固定元素意外地与我的页面内容重叠。

我试过使用 position:sticky; top:0; 相反，粘性元素不希望地粘附在页面顶部。我无法申请 margin 。

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元素中实现固定元素？

Answer 1

I've tried using position:sticky; top:0; instead however the sticky element undesirably clings to the top of page. I'm unable to apply a margin.

认为我们在使用position:sticky 时需要使用top:0 是一个常见的错误。而您可以考虑任何您想要的有效值。

For stickily positioned elements, left, right, top and bottom are offsets from the respective edges of its flow box which are used to constrain the element’s offset. Percentage values of left and right refer to the width of its flow box; percentage values of top and bottom refer to the height of its flow box. ^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?