Позиция фиксированная занимает много места

Я действительно смущен позиционированием div. Как я пытаюсь сделать заголовок закрепленного на верхней части, а другой DIV после заголовка, он ввинчивается и принимая много места ..Позиция фиксированная занимает много места

<div id="header"> 
    <div id="header-center"> 
     <div id="headerleft"> 
      <h1> <a href="link"> LOGO </a> </h1> 
     </div> 

     <div id="nav"> 
      <ul> 
       <li> <a href="link" LINK </a> </li> 
       <li> <a href="link" LINK </a> </li> 
       <li> <a href="link" LINK </a> </li> 
       <li> <a href="link" LINK </a> </li> 
       <li> <a href="link" LINK </a> </li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div id="article"> 
    <p> HELLO </p> 
</div>

А вот моего CSS

#header { 
height:60px; 
backgroundcolor:rgba(51,102,153,1); 
color:#FFF; 
position:fixed; 
bottom:0;left:0;right:0;top:0; 
z-index:9999; 
} 

#article { 
margin:0 auto; 
}

А вот мой JSFIDDLE.

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

Любые идеи?

Спасибо.

источник

2014-01-15 Anthosiastic

Это: 'bottom: 0; left: 0; right: 0; top: 0;' противоречиво. Вы можете либо иметь «нижний», либо «верхний», «левый» или «правый». –

Ваше использование фиксированного положения является правильным для заголовка. Вам просто нужно установить соответствующее верхнее поле или дополнение для '# article', чтобы учесть пространство, занятое заголовком. Если вы не уверены, когда использовать «статические», «относительные», «фиксированные» или «абсолютные» для позиции элемента, тогда было бы полезно прочитать их, чтобы лучше понять, когда использовать каждый , [Вот очень полезная статья] (http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/). – Sadiq

Эй, спасибо за статью, это помогает! – Anthosiastic

#header { 
    height:60px; 
    backgroundcolor:rgba(51,102,153,1); 
    color:#FFF; 
    position:fixed; 
    left:0; 
    right： 0; 
    top:0; 
    z-index:9999; 
} 
#header-center { 
    margin: 0 auto; width: 960px; 
} 
#headerleft { 
    float: left; 
} 
#nav { 
    float: left;//this depends on what your design looks like! 
} 
#article { 
    margin:60px auto 0; 
}

источник

2014-01-15 00:57:45 jingyinggong

Это работает для меня! – Anthosiastic

Вы близко. Во-первых, закрыть все теги анкерные:

   <li> <a href="link"> LINK </a> </li> 
       <li> <a href="link"> LINK </a> </li> 
       <li> <a href="link"> LINK </a> </li> 
       <li> <a href="link"> LINK </a> </li> 
       <li> <a href="link"> LINK </a> </li>

Далее вам необходимо убедиться, что страница достаточно долго нужно прокручивать.

Посмотрите на это: http://jsfiddle.net/8kkS6/4/

<div id="article"> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
    <p> HELLO </p> 
</div>

Тогда, чтобы убедиться, что заголовок не перекрывает текст тела, вы должны дать организму некоторое дополнение: в верхней части

body{ 
    padding-top:60px; 
}

источник

2014-01-15 00:54:29 Djave

Позиция фиксированная занимает много места

ответ

Смежные вопросы