Почему моя липкая навигация работает только тогда, когда мой заголовок настроен как встроенный? - PullRequest
Новая
       42

Почему моя липкая навигация работает только тогда, когда мой заголовок настроен как встроенный?

2 голосов
/ 17 июня 2020

Это мой HTML файл: 

    .jumbotron {
       font-size: 20px;
       padding: 60px;
       background-color: #00a8ec;
       text-align: center;
       color: white;
    }
    
    header {
       display: inline;
    } 
    
    nav {
       background-color: #00b2a6;
       padding: 5px;
       position: sticky;
       top: 0;
    }
    
    footer {
        padding: 20px;
        color: white;
        background-color: #00b2a6;
        text-align: center;
        font-weight: bold;
     }
<!DOCTYPE html>
    
        
            TITLE

TITLE

DESCRIPTION

Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha

FOOTER

Я все еще не понять, почему моя липкая навигация будет работать только в том случае, если я установлю элемент заголовка в HTML с display: inline? Если я удалю это свойство, липкая навигация больше не будет работать.

Я мешаю выучить HTML и CSS, большое спасибо за вашу поддержку!

1 Ответ

2 голосов
/ 17 июня 2020

Вы нашли хитрость, чтобы заставить его работать. При использовании inline у вас будут элементы уровня блока внутри первого элемента встроенного уровня, который недействителен , и это похоже на то, что встроенный элемент больше не существует (это упрощенное объяснение, на самом деле это немного сложнее 1 ).

Ваш код такой же, как и без заголовка: 

.jumbotron {
  font-size: 20px;
  padding: 60px;
  background-color: #00a8ec;
  text-align: center;
  color: white;
}

nav {
  background-color: #00b2a6;
  padding: 5px;
  position: sticky;
  top: 0;
}

footer {
  padding: 20px;
  color: white;
  background-color: #00b2a6;
  text-align: center;
  font-weight: bold;
}

    TITLE
    DESCRIPTION
  
  
Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha

ФУТЕР

Липкий не будет работать, если завернуть его внутрь другой контейнер. Его необходимо разместить непосредственно внутри вашего тела, где находится длинный контент.

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

.jumbotron {
  font-size: 20px;
  padding: 60px;
  background-color: #00a8ec;
  text-align: center;
  color: white;
}
header {
  border:5px solid red;
}
nav {
  background-color: #00b2a6;
  padding: 5px;
  position: sticky;
  top: 0;
}

footer {
  padding: 20px;
  color: white;
  background-color: #00b2a6;
  text-align: center;
  font-weight: bold;
}

TITLE

DESCRIPTION

Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha

ФУТЕР

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

Связанные вопросы:

Почему position: sticky не работает, когда элемент завернут в другой?

Почему bottom: 0 не работает с position: sticky?

1 Из спецификации :

Содержащий блок статического c, относительного или липкого блока определяется его форматированием context.

В вашем случае мы находимся внутри контекста форматирования блока, поэтому

содержащий блок формируется краем содержимого ближайшего контейнера блока ящик предка. исх.

И

липкий

Идентично относительному, за исключением того, что его смещения автоматически настраиваются по отношению к полосе прокрутки ближайшего предка контейнера прокрутки (как изменено свойствами вставки) в зависимости от осей, по которым свойства вставки не являются автоматическими, чтобы попытаться сохранить поле в поле зрения в содержащем его блоке , когда пользователь прокручивает. исх.

...