머리글을 맨 위에 올리려면 어떻게해야합니까?

그래서 나는 사이트의이 작은 시작 부분을 가지고 있으며 상위 메뉴가 다른 것 위에 머물러 있기를 원합니다. 나는 고정 된 위치를 사용했다. 이제는 로고를 표시하는 div 하나를 제외하고 모든 것을 맨 위에 둔다. 나는 Z- 인덱스를 사용해 보았지만 도움이되지 않았다. 내가 ... 가능하면 JS를 사용하지 않고 상단에머리글을 맨 위에 올리려면 어떻게해야합니까?

을 유지하기 위해 해당 헤더를 강요하는 걸까 어떻게 "blackBar"는 제목의 상단에 통과하지만 여기에만 않는이 ...

<body> 
<div id="pageBloc"> 
    <header> 
     <nav> 
      <ul> 
        <li><a href="#">Stuff1</a></li> 
        <li><a href="#">Stuff2</a></li> 
        <li><a href="#">Stuff3</a></li> 
        <li><a href="#">Stuff4</a></li> 
        <li><a href="#">Stuff5</a></li> 
       </ul> 
      </nav> 
     </header> 

     <div id="topBloc"> 

      <div id="blackBar"> 
       <p id="logo"><img src="Images/logoSmall.png" alt="logo"</p> 
       <h1 id="titrePrincipal">MyTitle</h1> 
       <h2 id="soustitrePrincipal">SubTitle/h2> 
      </div> 

     </div> 

     <section id="temporatySection"> 

     </section> 
    </div> 
</body>

입니다입니다 CSS를

body, html 
{ 
    margin: 0px; 
    padding: 0px; 
    height:100%; 
} 
#pageBloc 
{ 
    height:100%; 
} 

/*Header*/ 

header 
{ 
    text-align:center; 
    background-color: #26292E; 
    height: 40px; 
    width: 100%; 
    position:fixed; 

} 

nav ul, nav li 
{ 
    margin-top:5px; 
    text-transform:uppercase; 
    display: inline-block; 
    list-style-type:none; 
} 

#topBloc 
{ 
    background: url('Images/backgroundBloc12.jpg') fixed center; 
    background-size:cover; 
    width: 100%; 
    height: 100%; 
} 

#blackBar 
{ 
    background: rgba(38,41,46,0.80); 
    position:absolute; 
    bottom:15%; 
    width: 100%; 
} 

#logo 
{ 
    padding: 3px; 
    text-align: center; 
} 

#titrePrincipal 
{ 
    display:none; 
    text-align:center; 
    color: white; 
} 

#soustitrePrincipal 
{ 
    text-align: center; 
    color:black; 
} 

#temporarySection 
{ 
    height: 1000px; 
}

출처

2013-10-21 user2904983

현재 코딩이 주어진 경우 - http://jsfiddle.net/gGMzD/ - 나에게 잘 보입니다. –

는 #logo에 position: relative; z-index: -1;를 추가합니다.

z-index: -2을 #blackbar에 추가하십시오.

는 여기를 참조하십시오 : http://jsfiddle.net/davidpauljunior/gGMzD/1/이

출처

2013-10-21 23:05:17 davidpauljunior

위치가 고정 대신에, 당신은

position: absolute 
top: 0 
left: 0 
right: 0 
z-index: 100

을 시도 할 수 있지만 위치가 고정 사용해야하는 경우, 당신이 이것을 무시하고 위의 답을 볼 수 있습니다.

출처

2013-10-21 23:56:04 dhan

머리글을 맨 위에 올리려면 어떻게해야합니까?

답변

관련 문제