많은 공간을 차지하는 위치 고정

위치 지정 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

이것은 : 하단 : 0; 왼쪽 : 0; 오른쪽 : 0; 상단 : 0;은 모순입니다. 'bottom' 또는'top'과'left' 또는'right'를 가질 수 있습니다. –

고정 위치의 사용법이 머리글에 맞습니다. 머리글이 차지하는 공간을 고려하기 위해'# 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>

다음으로 스크롤해야 할 페이지가 충분히 길어야합니다.

body{ 
    padding-top:60px; 
}

: 당신이 몸을 상단에 약간의 패딩을 줄 필요가 그런

<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>

http://jsfiddle.net/8kkS6/4/

헤더가 본문 텍스트를 중복되지 않는지 확인하기 :

이에서보세요

출처

2014-01-15 00:54:29 Djave

많은 공간을 차지하는 위치 고정

답변

관련 문제