Держите фиксированную полосу меню от перекрытия

Question

все!

Я более или менее проектирую своего рода прототип веб-сайта. Как и другие веб-сайты, я пытаюсь создать панель меню, которая фиксируется в позиции, но не перекрывает все остальное, что я помещаю на экран. Поэтому, по сути, я хотел бы иметь коробку на 100% (панель меню) поверх другой коробки (тела веб-страницы), которая опирается на нижний колонтитул.

Мой код выглядит следующим образом:

<header> 
    <nav> 
    <ul> 
     <a href="#"><li>Name</li></a> 
     ...More list elements... 
    </ul> 
    </nav> 
</header> 

header{ 
    background-color:white; 
    width:100%; 
    padding:15px; 
    border-bottom:1px solid black; 
    position:fixed; 
    margin-top:-25px; 

nav ul li{ 
    list-style-type:none; 
    display:inline-block; 
    padding:10px; 
    margin-right:100px; 
    font-family:Script MT, /*To make sure the font is displayable for you*/ Arial; 
    font-size:20px; 

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

Вопрос в следующем: Как я могу заставить мой бар-меню оставаться неподвижным, но не перекрывать все остальное?

Answer 1

Вы должны компенсировать содержание по высоте вашего заголовка, который означает, что вы должны дать ему фиксированную высоту:

HTML:

<header> 
    ... 
</header> 

<div class="content"> 
</div> 

CSS:

header{ 
    ... 
    height:50px; 
} 

.content{ 
    margin-top:50px  
} 

Answer 2

Попробуйте использовать z-index и установите его напр. 9999:

header { 
    background-color:white; 
    width:100%; 
    padding:15px; 
    border-bottom:1px solid black; 
    position:fixed; 
    margin-top:-25px; 
    z-index: 9999; 
} 

Это поместит заголовок перед всеми другими элементами, если они не имеют более высокое число Z-индекс.

Answer 3

Если я понимаю, что вы просите, поставьте padding-top на тег body, который равен высоте строки меню. Таким образом, когда вы находитесь в верхней части страницы, плавающее меню не перекрывает ничего.