2016-06-15 1 views
1

Я понятия не имею, почему заголовок встраивается в панель навигации, поскольку они разные элементы? Не нуждайтесь в заголовке под навигацией без радости. Спасибо в ожидании. Link:https://jsfiddle.net/a6jxea0vЭлемент заголовка вставляется в навигационный элемент

enter image description here

+0

Вы ваш навигационный элемент установлен в фиксированном положении. Это удаляет его из относительного позиционирования и фиксирует его в верхней части экрана. Элемент header теперь является верхним оставшимся элементом в документе, и он плавает в верхней части экрана (где он скрыт за заголовком.) Вам просто нужно работать с CSS. Если бы это был я, я бы просто добавил margin/padding в верхнюю часть относительных позиционированных элементов, чтобы контент очищал элемент nav. Другой способ исправить это - просто удалить «position: fixed;» из элемента nav. – zipzit

+0

Спасибо, зипзит! Я понятия не имел, что элементы фиксированной позиции удалены из потока документов! –

ответ

2

Добавить padding-top:45px; в ваш заголовок, потому что ваш Navbar исправил положение так заголовок начинается с верхней частью тела, так что вы должны добавить верхний интервал в соответствии с высоты навигационной панели.

header { 
    width: 100%; 
    margin: 0; 
    padding:45px 0 0; 
    color: #000; 
} 

Вот jsfiddle: https://jsfiddle.net/a6jxea0v/2/

+0

Привет, Мукеш. Есть ли дополнительный способ вернуть навигационную панель в ее исходное местоположение (вверху экрана) и заголовок под ним без использования прокладки? Вы знаете причину, по которой элемент заголовка плавает в навигации? –

+0

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

+0

Большое вам спасибо. –