위치 고정 요소

저는 HTML5에 약간의 문제가 있습니다.위치 고정 요소

고정 된 요소를 배치하려고 할 때 머리글로 jpg가 있으며 바로 아래에 nav라는 메뉴가있는 div가 있습니다.

나는 CSS를 통해 많은 노력을 해왔고 많은 CSS 규칙을 사용하여이 div 메뉴를 고정 시켰습니다. 왜냐하면 스크롤을 내릴 때 페이지의 나머지 부분이 스크롤되는 동안 최상위 위치에 머물러 있기를 원하기 때문입니다.

여기 코드가 있습니다, 모두 감사합니다!

// EDIT1 : 나는 헤더 CSS를 시도했지만 그게 내가 심지어 헤더를 통해 메뉴를 오버레이하기 위해 노력하고있어, 요점이 아니다, 내가 만약 예를 발견하지만 난이 성공적으로 편집 코드를 기울인다 :

http://poselab.com/contenidos/position-fixed/relative-position-fixed.html

JSFiddle Link

<body bgcolor="#FFFFFF"> 
<div class="wrapper"> 
    <header> 
     <img src="../doc/img/cabecera.png" width="1024" height="170" alt="" /> 
    </header>http://jsfiddle.net/kesarkes/uJsHL/embedded/result/ 
    <!--<div class="fijado">--> 
    <div class="menu"> 
     <nav align="center"> 
      <ul> 
       <li id="home1"><a href="index.html">home</a> 
       </li> 
       <li id="folio2"><a href="#b1">folio</a> 
       </li> 
       <li id="bio3"><a href="#bioinfo">bio</a> 
       </li> 
       <li><a href="contact.html" target="_blank">contact</a> 
       </li> 
      </ul> 
     </nav> 
    </div> 
    <!--</div>--> 
    <!--<div id="slideshow"></div>--> 
    <div class="slideshow"></div> 
    <div class="fotos"> 
     <hr id="b1"></hr> 
     <div class="grupo_foto"><a href="1"><div class="grupo_foto1_1"></div></a> 
     </div> 
     <div class="grupo_foto2"><a href="1"><div class="grupo_foto2_1"></div></a> 
     </div> 
     <div class="grupo_foto3"><a href="1"><div class="grupo_foto3_1"></div></a> 
     </div> 
     <div class="grupo_foto4"><a href="1"><div class="grupo_foto4_1"></div></a> 
     </div> 
    </div> 
    <div id="bioinfo"> 
     <hr id="b2"></hr> 
     <div id="fotokes" title="Hi, it's me!"> 
      <p> 
       <img src="../doc/img/img_kes.png" width="156" height="170" alt="César M.Posada" /> 
      </p> 
     </div> 
     <div id="texto"> 
      <p>Born in 1990 in Madrid, Cesar Martinez is an Informatic Engineer who is currently focused in graphic design, web building, photography, 3D and many other fields about graphic arts. His main work also includes very suitable offers like publicity work, media promo or corporative image. He has a clear and simple style according with new tendencies which is the most important target in his job.</p> 
     </div> 
    </div> 
    <div id="redes"> 
     <div id="red_twitter" title="Twitter"> <a href="https://twitter.com/_CesarPosada" target="_blank"><div id="red_twitter1"> 
</div></a> 
     </div> 
     <div id="red_facebook" title="Facebook"> <a href="https://www.facebook.com/cesar.martinezposada" target="_blank"><div id="red_facebook1"></div></a> 
     </div> 
     <div id="red_flickr" title="Flickr"> <a href="https://www.flickr.com/photos/kesdesigns/" target="_blank"><div id="red_flickr1"></div></a> 

     </div> 
     <div id="red_contact" title="Contact me"> <a href="r" target="_blank"><div id="red_contact1"></div></a> 

     </div> 
    </div> 
</div>

당신은, PL 추가 할 필요가

출처

2014-07-16 César Martínez

당신은 당신의 CSS를 표시 할 수 있습니다. – putvande

가능한 복제본 http://stackoverflow.com/questions/19158559/how-to-fix-a-header-on-scroll – Haris

z-index을 추가하지 않으면 내용이 머리글과 코드가 겹칠 수 있으므로주의하십시오.

header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 999; 
}

확인 업데이트 된 바이올린

Demo

출처

2014-07-16 14:27:16 Haris

그리고 메뉴 항목도 수정하려는 경우 고정 위치를 추가하고 또한 Z- 인덱스를 설정하여 스크롤 가능한 낮은 내용 아래로 가지 않도록하십시오. –

위치 고정 요소

답변

관련 문제