2013-08-14 3 views
1

Я искал сайт широко, но не могу найти ответ. Пожалуйста, я новичок, и мне нужна ваша помощь.Исчезновение навигационных ссылок/баров

Я хочу создать фиксированную навигационную панель, но каждый раз, когда фиксированное правило помещается внутри моей таблицы стилей CSS, панель навигации исчезает. Вот мой HTML-код:

<div id="container"> 
    <div id="nav-wrapper"> 
    <div id="nav"> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
    </div> 

и здесь jsfiddle ссылку

http://jsfiddle.net/ePttq/

любая обратная связь очень ценится. Большое спасибо!

+0

Я полагаю, вам также нужно объяснить, что такое фиксированное правило? И, поскольку вы новичок, вы отлично справляетесь. Идите легко на себя! Люди здесь, чтобы помочь :) – AdityaSaxena

+0

'все же каждый раз, когда фиксированное правило помещается внутри моей таблицы стилей CSS, панель навигации исчезает' - Можете ли вы уточнить эту часть? а также объясните, чего вы пытаетесь достичь? –

+0

Не вижу проблемы ... – lolo

ответ

1

есть проблема z-index в #nav пишут этот стиль в #nav

#container { 
    width: 900px; 
    margin: 0 auto; 
    position:relative; 
    padding-top:50px; 
} 

#nav { 
    height: 50px; 
    background: #b7d84b; 
    position:fixed; 
    z-index:10; 
    width:900px; 
    top:0; 
} 

обновленный jsFiddle File

+0

Но его скрывающий контент, решите его –

+0

Я обновил ответ, а также код jsFiddle, надеюсь, что это решит вашу проблему. –

+0

Я довольно хорошо. :) –

0

Используйте следующий встроенный стиль в вашем навигационном DIV:

<div id="nav" style="position:fixed;top:0;width:100%;z-index:10000"> 
      <a href="#">Link1</a> 
      <a href="#">Link</a> 
      <a href="#">Link</a> 
      <a href="#">Link</a> 
      <a href="#">Link</a> 
     </div> 
1

Хорошо .. есть ваш ответ: http://jsfiddle.net/ePttq/3/

А вот изменение, которое вы должны сделать в вашем CSS:

#nav { 
    height: 50px; 
    background: #b7d84b; 
    position:fixed; 
    top:0px; 
    left:0px; 
    z-index:100; 
    right:0px; 
} 

Я сделал ваш Navbar фиксированной ... Даже на scrolling..this будет продолжать работать :)

+0

Надеюсь, вы не против моего вопроса, но как вы выяснили, что мне нужно добавить «z-index: 100»? – Uzzar

+0

Я бы идеально поставил его на 9999 .. если моя страница содержит много элементов. Это всегда будет работать. Но, в большинстве случаев, 100 или около того. – AdityaSaxena

0
#nav { 
height: 50px; 
background: #b7d84b; 
position:fixed; 
z-index:9999; 
width:100%; 
} 
Смежные вопросы