Почему свойство align-self не работает с панелью навигации при использовании flex? - PullRequest
Новая
       48

Почему свойство align-self не работает с панелью навигации при использовании flex?

4 голосов
/ 29 мая 2019

Это должна быть липкая панель навигации, но она никогда не становится липкой. Я читал, что должен использовать align-self: flex-start;, чтобы исправить эту проблему с помощью flex, но, к сожалению, не делает этого. 

body { padding-bottom: 2000px;}
ul { list-style: none;}

.wrap {
 position: sticky;
 position: -webkit-sticky; 
 top: 0; 
 align-self: flex-start; 
}
.nav-bar { 
 display: flex; 
 flex-direction: row; 
 justify-content: flex-end; 
 background-color: #00aae4; 
 margin-bottom: 0;
 padding-right: 30px; 
 height: 50px; 
 margin-top:0; 
}
.nav-link { 
 padding-left: 0; 
 padding-right: 0; 
 background-color: #f1f1f1;
 width: 100px; 
 text-align: center;
 font-size: 20px; 
 margin-top: 5px; 
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<nav class="wrap">
          <ul class="nav-bar">
            <li class="nav-link">Luigis</li>
            <li class="nav-link">Menu</li>
            <li class="nav-link">Acerca de </li>
            <li class="nav-link">Contacto</li>
          </ul>
    </nav>
</body>
</html>

Я попытался изменить расположение свойства align-self в настройках ul и использовал top. Также попытался удалить список, просто используя div с предложениями, но все равно ничего не получилось.

1 Ответ

2 голосов
/ 29 мая 2019

С Спецификация :

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

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

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

body {
  height: 2000px;
}

ul {
  list-style: none;
}

.wrap {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.nav-bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  background-color: #00aae4;
  margin-bottom: 0;
  padding-right: 30px;
  height: 50px;
  margin-top: 0;
}

.nav-link {
  padding-left: 0;
  padding-right: 0;
  background-color: #f1f1f1;
  width: 100px;
  text-align: center;
  font-size: 20px;
  margin-top: 5px;
}
<nav class="wrap">
    <ul class="nav-bar">
      <li class="nav-link">Luigis</li>
      <li class="nav-link">Menu</li>
      <li class="nav-link">Acerca de </li>
      <li class="nav-link">Contacto</li>
    </ul>
  </nav>
  1. Для других элементов, если позиция элемента является «относительной» или «статической», содержащий блок формируется из края содержимого блока предка контейнера ближайшего блока. исх

Возможно, вы путаете с содержащим блоком элемента с абсолютным позиционированием, который является полем заполнения:

  1. Если элемент имеет 'position: absolute', содержащий блок устанавливается ближайшим предком с помощью 'position' of 'absolute', 'относительный' или 'фиксированный', следующим образом:

    1. В случае, когда предком является встроенный элемент, содержащий его блок является ограничивающим прямоугольником вокруг заполнительных полей первого и последнего встроенных блоков, созданных для этого элемента. В CSS 2.1, если встроенный элемент разбит на несколько строк, содержащийся блок не определен.
    2. В противном случае вмещающий блок формируется из отступа предка.
...