Why position:sticky is not working when the element is wrapped inside another one?

Question

I am experimenting with sticky nav and I ran into problem. Problem is that when I put the nav in other element it's not anymore sticky.

.nav-wrapper{
  position: absolute; 
  bottom: 0;
}

.nav-wrapper nav{
  position: sticky;
  top: 0;
}

    <div class="nav-wrapper">
     <nav>
      <a href="#"><li>Home</li></a>
      <a href="#"><li>About</li></a>
     </nav>
    </div>

I believe (but don't know for sure) the question was being downvoted because it lacked code before your revision 4 minutes ago. — jww, Oct 25 '18 at 19:43
but i believe that this problem can be solved without code by person that knows css well :) — Kristers Dzintars, Oct 25 '18 at 19:46
There is no problem that can be solved without code ... the problem arised from a particular code that's what we need to see a code — Temani Afif, Oct 25 '18 at 20:40

Temani Afif · Accepted Answer · 2021-08-28T19:36:26.507

position:sticky consider the parent element to behave as it should be. In your case the parent element has its height defined by the sticky element so there is no room for the element to have a sticky behavior

Add border to better see the issue:

.nav-wrapper {
  position: absolute;
  bottom: 0;
  border: 2px solid;
}

.nav-wrapper nav {
  position: sticky;
  top: 0;
}

body {
  min-height:200vh;
}

<div class="nav-wrapper">
  <nav>
    <a href="#">
      <li>Home</li>
    </a>
    <a href="#">
      <li>About</li>
    </a>
  </nav>
</div>

Now add height to the parent element and see what is happening:

.nav-wrapper {
  position: absolute;
  bottom: 0;
  border: 2px solid;
  height:80vh;
}

.nav-wrapper nav {
  position: sticky;
  top: 0;
}

body {
  min-height:200vh;
}

<div class="nav-wrapper">
  <nav>
    <a href="#">
      <li>Home</li>
    </a>
    <a href="#">
      <li>About</li>
    </a>
  </nav>
</div>

The sticky behavior is working fine because there is enough height on the parent element where the element can be fixed after a specific threshold.

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.^ref

Why position:sticky is not working when the element is wrapped inside another one?

1 Answers1

Linked

Related