3

I have a fixed element in a left sidebar. The left sidebar is an item of a flexbox.

When I apply position:fixed; to the fixed element, the flexbox item containing it collapses and my fixed element undesirably overlaps my page content.

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.

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>

How can achieve a fixed element inside a flexbox item?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Clarus Dignus
  • 3,847
  • 3
  • 31
  • 57
  • 2
    i guess you meant to use `position:sticky` . `fixed`and `absolute`are off the flow of the document, so it might overlap any static or relative elements. – G-Cyrillus Apr 12 '19 at 21:45
  • 1
    What's the end goal here? A position of fixed will always stay relative to the browser window regardless of it's parent (even if it's parent is flexbox), so I don't think it's what you want to use here at all – little tiny man Apr 12 '19 at 21:48
  • @G-Cyr Yes, I meant `position:sticky`. Thanks. Question edited. – Clarus Dignus Apr 12 '19 at 21:49
  • @littletinyman End-goal: The fixed element is a table of contents that remains fixed in place as the rest of the page is scrolled. Clicking links in the table of contents will result in the corresponding page section being scrolled to. – Clarus Dignus Apr 12 '19 at 21:52
  • @G-Cyr To prevent overlapping, I need the flexbox item to behave as if it contains an element of the same width as the fixed element. I.e. `300px`. – Clarus Dignus Apr 12 '19 at 21:55
  • 1
    you aren't obliged to use `top:0` with sticky, you can try `top:20px` for example to have the margin you want – Temani Afif Apr 12 '19 at 21:58
  • @G-Cyr Yes, the layout is as expected when I remove the position rule. Yes, sticky is fine. My mistake was not defining `top` at a high enough value to see a space between the top of sticky element and the top of the page. Thanks. – Clarus Dignus Apr 12 '19 at 22:13

1 Answers1

2

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.

It's a common mistake to think that we need to use top:0 when using position:sticky. whereas you can consider any valid value you want.

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

So you can simply use top:X where X is the margin you defined for your container:

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>

Related question for more examples and to see that we can do the same with bottom: Why element with position:sticky doesn't stick to the bottom of parent?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415