2016-06-26 5 views
0

Работа на сайте, и я стараюсь сделать так, чтобы <header></header> и навигация оставалась в верхней части сайта. Я могу сделать это с некоторыми проблемами, которые я не могу решить.CSS Исправлена ​​верхняя часть заголовка: 0;

код я использую:

header { 
    background:#000; 
    position:fixed; 
    width: 100%; 
    top: 0; 
} 

Теперь, как только я помещаю этот код, каждая вещь удар или нет с в <header> тег падает под «», а также прокручивается под и через, как если бы проходя через него. Мне интересно, есть ли способ заставить остальную часть сайта упасть ниже «или», или прокрутить страницу, не пройдя через или через <header>?

Я попытался дать <header><margin-bottom>, чтобы создать пространство, чтобы текст был виден, когда сайт загружается первым, но это, похоже, не работает.

Любые ссылки на это решение?

ответ

1

Просто наденьте некоторую высоту на заголовок и край на теле.

header { 
    background:#000; 
    position:fixed; 
    width: 100%; 
    top: 0; 
    height: 60px; 
} 

body { 
    margin-top: 60px 
} 
+0

Добавлена: «тело { margin-top: 60px } 'и получил результаты, которые мне нужны! Спасибо :) – Warlo

0

Независимо от того, что обертывает ваше содержание в стороне от заголовка, дайте ему padding-top: [height of header]. Это позволит избежать перекрытия.

1

header Дайте z-index:9999, так что он всегда приходит на top содержимого также дают min-height:50px, надеюсь, что решить проблему :)

Благодарности

header { 
background:#000; 
position:fixed; 
width: 100%; 
min-height:50px; 
padding:50px 10px 5px; 
top: 0; 
left:0px; 
z-index:9999; 
overflow:hidden; 
} 
Смежные вопросы