Почему позиция: липкая не работает, когда элемент обернут внутри другого? - PullRequest
Новая
       10

Почему позиция: липкая не работает, когда элемент обернут внутри другого?

0 голосов
/ 25 октября 2018

Я экспериментирую с липкой навигацией и столкнулся с проблемой.Проблема в том, что когда я помещаю навигацию в другой элемент, он больше не липкий. 

.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>

1 Ответ

0 голосов
/ 25 октября 2018

Положение закреплено, считайте, что родительский элемент ведет себя так, как должно быть.В вашем случае его родительский элемент имеет высоту, определяемую липким элементом, поэтому нет места для элемента, чтобы он был липким.

Добавьте границу, чтобы лучше увидеть проблему: 

.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>

Теперь добавьте высоту к родительскому элементу и посмотрите, что происходит: 

.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>

Плохое поведение работает нормально, потому что на родительском элементе достаточно высоты, где элемент может быть зафиксирован после определенного порога.

Элемент с плохим позиционированием - это элемент, вычисленное значение позиции которого является липким.Он обрабатывается как относительно позиционированный до тех пор, пока его блок , содержащий блок, не пересечет указанный порог (например, установив top для значения, отличного от auto) в пределах своего корневого потока (или контейнера, в котором он прокручивается), вв какой момент он рассматривается как «застрявший» до встречи противоположного края содержащего его блока . ref

...