заголовок веб-сайта скрывается за содержимым, когда положение фиксировано

Я разрабатываю веб-сайт для школы и хочу, чтобы заголовок сайта был исправлен так же, как Facebook. Я попробовал исправление, предоставленное этим вопросом в stackoverflow, но оно вряд ли было полезным в заголовок. У меня есть изображение, в основном логотип школы, где я делаю position: fixed, но шапка прячется за страницу.

HTML:

<body>
  <div id="header" > <img src="images/iesheader_nnew1.jpg" /></div>

    <div id="menu">
      <ul>
           <li><a href="index.html"><abbr title="Home">Home&nbsp;&nbsp;</abbr></a></li>
           <li><a href="aboutus.html"> <abbr title="About Us">About Us&nbsp;&nbsp;</abbr> </a></li>
           <li><a href="acad.html"><abbr title="Academics">Academics</abbr></a></li>
           <li><a href="admin.html"><abbr title="Administration">Administration</abbr></a></li>
           <li><a href="news.html"><abbr title="News">News</abbr></a></li>
           <li><a href="contact.html"><abbr title="Contact Us">Contact Us</abbr> </a></li>
           <li><a href="photo.html"><abbr title="Photo Gallery">Photo Gallery</abbr> </a></li>
      </ul>     
        <div class="cleaner"></div>
  </div>

CSS:

#header {
    margin-left: 0px;
    width: auto;
    height: 90px;
    padding: 0px;
    padding-left:185px;
    font-size: 35px; color:#FFFFFF; 
    background-color: #f6c491;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
#menu {
    position: relative;
    clear: both;
    width: auto;
    height: 38px;
    padding: 0;
    padding-left:185px;
    background-color:#FFFFFF;   
    margin-bottom: 10px;
    margin-left:0px;
}

#menu ul {
    float: left;
    width: 960px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu ul li {
    padding: 0px;
    margin: 0px;
    display: inline;
}

#menu a {
    float: left;
    display: block;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #000;
    outline: none;
    border: none;   
    border-top: 3px solid black;
}

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


css css-position
person thewhitetulip    schedule 02.06.2012    source источник
comment
какой браузер вы используете, т.е. более старые версии не поддерживают фиксированное положение   -  person Bipin Chandra Tripathi    schedule 02.06.2012
comment
@Bipin На самом деле я использую последние стабильные браузеры: Chrome 20 IE 9 и Safari 5.6.   -  person thewhitetulip    schedule 03.06.2012

Ответы (5)


arrow_upward
36
arrow_downward

Добавьте z-index:1000 в #header css и добавьте padding-top в body css, который должен быть немного больше высоты заголовка. Например, если высота заголовка составляет 40 пикселей, поместите padding-top: 50 пикселей в CSS тела, и он должен работать.

person vivek    schedule 02.06.2012
comment
я сделал это, но после этого мой заголовок теперь выше остального контента! поэтому пользователи увидят только заголовок, а не какой-либо другой контент - person thewhitetulip; 03.06.2012
comment
Вы можете добавить padding-top в тело css, которое должно быть немного больше высоты заголовка. Например, если высота заголовка составляет 40 пикселей, поместите padding-top: 50 пикселей в CSS тела, и он должен работать. - person vivek; 03.06.2012

arrow_upward
11
arrow_downward

Когда вы добавляете элементу фиксированную и/или абсолютную позицию, это означает, что элемент выйдет из естественного потока и теперь он принадлежит «слою», который не связан со слоем, где все элементы находятся в естественном потоке документа. .

Это отличная функция, так как теперь вы можете размещать эти элементы в любом месте, не беспокоясь об остальной части страницы.

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

Например, если у вас было следующее:

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

Повторяя то, что вы сделали, добавляя позицию, фиксированную к заголовку, и учитывая, что его высота составляет 50 пикселей, элемент контента получит padding-top: 50px, и он должен сработать.

   <style>
   .header{position:fixed;top:0;height:50px;}
   .content{padding-top:50px;}
   </style>
person Vinicius Santana    schedule 03.10.2013
comment
спасибо, что поделились, кажется, вы были единственным, кто дал разумный ответ... есть ли у вас какая-либо ссылка на:... это принадлежит слою, который не связан со слоем... - person Marcelo Sardelich; 07.02.2014
comment
Это похоже на то, что естественный поток элементов ниже потока элементов с позициями, определенными css. Конечно, вы можете управлять им с помощью z-index. Я назвал слой двумерным планом, определяемым каждым значением z-индекса. - person Vinicius Santana; 21.02.2014
comment
это действительно очень полезно - person Prabhakar; 23.01.2021

arrow_upward
2
arrow_downward

Когда вы устанавливаете для элемента фиксированное позиционирование, предполагается, что другие соседние элементы не существуют. Дайте элементу, который вы хотите зафиксировать, больший z-индекс. Затем, чтобы предотвратить перекрытие, присвойте элементу, которому предшествует фиксированный элемент, тот же padding-top, что и высота фиксированного элемента. Надеюсь, поможет.

person Vik    schedule 25.06.2018

arrow_upward
1
arrow_downward

CSS Z-index может быть вашим решением

http://www.w3schools.com/cssref/pr_pos_z-index.asp

person thedrs    schedule 02.06.2012

arrow_upward
1
arrow_downward

Вы можете использовать z-индекс

Какому элементу вы хотите, чтобы он был впереди других элементов, дайте значение z-index выше.

Так:

z-index: 300;//navbars

z-index: 0;//contents
person Alp Eren Gül    schedule 10.08.2020
comment
Я поставил так позже, но если кому-то нужно, он может использовать его. - person Alp Eren Gül; 10.08.2020