절대 값으로 고정 된 div?

Question

this.에 대한 비슷한 페이지를 만들고 싶습니다. 특히 그 이미지에 플래그가있는 interesed입니다. Fiddle.

HTML을 : : 이미 어떻게 관리 내가 그에게 비슷한 무언가를 만들기 위해 노력하고이다

<div id="logo"> <a href="#"><img src="http://s20.postimg.org/9sr84gnw9/logo.png" alt="logo"></img></a> 
    <ul id="navbar"> 
     <li><a href="Marsrutai.html">Maršrutai</a> 

     </li> 
     <li><a href="Nuotraukos.html">Nuotraukos</a> 
     </li> 
     <li><a href="Apie mane.html">Apie mane</a> 
     </li> 
     <li><a href="Dviraciai.html">Dviračiai</a> 
     </li> 
     <li><a href="Kontaktai.html">Kontaktai</a> 
     </li> 
    </ul> 
    <div id="header"> 
     <h1>MARŠRUTAI</h1> 

    </div> 
    <div id="content"></div> 

CSS :

body { 
    background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px; 
    background-color: #282828; 
    background-size: 16px 16px; 
} 

#header { 
    background-image:url(http://s20.postimg.org/gcpvgfth8/header.jpg); 
    position: fixed; 
    width: 100%; 
    height:150px; 
    text-align:center; 
    text-top:50%; 
    color: white; 
    top:70px; 
    left:0; 
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
    padding: 50px 0; 
} 

#content { 
    width:100%; 
    height:100%; 
    position: absolute; 
    top:351px; 
/*bacground gradients: http://lea.verou.me/css3patterns/# */ 
    background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px; 
    background-color: #282828; 
    background-size: 16px 16px; 

    left:0; 
    bottom:0; 
} 

#logo { 
    position:fixed; 
} 

ul { 
    text-shadow: 0px 2px #444; 
    font-size: 20px; 
    padding: 0; 
    list-style: none; 
    text-align: center; 
    display: table; 
    margin: 0 auto; 
    position: fixed; 
    left: 32%; 
    right: 25%; 
    top:15px; 
} 


ul li { 
    position: relative; 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
} 

li ul { 
    display: none; 
} 


ul li a { 
    display: inline-block; 
    text-decoration: none; 
    color: #eee; 
    padding: 5px 0; 
    white-space: nowrap; 
    margin: 5px; 
    vertical-align: middle; 
    text-align: center; 
    border: 1px solid transparent; 
} 


ul li a:hover { 
    border-width: 1px; 
    border-style: solid; 
    border-color: #FFFFFF; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    color: #CACACA; 

당신이 볼 수 있듯이, 당신이 아래로 scrool content div with pisition : absolute는 위치가 고정 된 다른 모든 div를 포함합니다. 그러나 나는 당신이 scrool 할 때 content div가 header div와 logo를 포함하고 ul이 모든 것을 유지할 수 있기를 바랍니다. 마찬가지로 안으로 this page.

나는 html을 만들 때 초보자이기 때문에 내가 제대로하고 있는지 확신하지 못한다. 그런 식으로 할 수있는 다른 방법이 있습니까?

Answer 1

로고 위에 z- 색인을 더 많이 사용하면 원하는대로 작동합니다.