위치 요소가 다른 것 아래

저는 웹 개발자가 아니므로 여기 나와 함께하시기 바랍니다.위치 요소가 다른 것 아래

상단 부분이 275x116 인 이미지로 찍은 다음 배너 상단에서 70 % 위치에 나타나는 가로형 메뉴 표시 줄 (ul 항목을 사용하여 스타일 지정)이있는 페이지의 배너 스타일 헤더를 표시하고 싶습니다. .

네비게이션 아래에 배너가 표시되도록 어떻게 설정합니까? 현재 내 메뉴 표시 줄의 왼쪽의 부분은 이미지 아래에 앉아 있지만 메뉴 바는, 이미지 위의이 같은 몇 가지 일이 그래서 반대 싶습니다 :

============= <start of header> =========== 
    -------- 
    | img | 
    |  | 
    |  Horizontal menu 
    |  | 
    -------- 
    ============= <end of header> ===========

내 CSS :

#header 
{ 
    background-color: green;   
    border: 0; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    width: 100%;  
    height: 120px; 
} 

#logo 
{ 
    background: green url(images/logo.png) no-repeat scroll 0 0; 
    margin: 0px 0px; 
    border: 1px solid white;  
    left: 20px; 
    top: 20px; 
    width: 275px; 
    height: 116px; 
    position: absolute; 
    z-index: -1000; 
} 

.container { 
    border:1px solid grey; 
    margin-left:auto; 
    margin-right:auto; 
    width:960px; 
}

내 HTML은 :

<body> 

<div id="header"> 
    <div id="logo"> 
    </div> 

    <div class="container" id="primaryNavbar"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Books</a></li> 
     <li><a href="#">Shows</a></li> 
     <li><a href="#">Movies</a></li> 
    </ul>     

    <div class="clear">&nbsp;</div>     

    </div> <!-- end of container --> 

</div> <!-- end of header --> 
</body>

가 나는 경우가 있지만, 매우 낮은 Z- 인덱스에 로고 요소의 위치 "절대"를 설정하고 추가하는 것은이를 것이라고 생각 이리.

제안 사항?

출처

2010-03-16 Cedar Jensen

기존 스타일에 이러한 항목을 추가 :

#header 
{ 
    position: relative; //this will keep your absolute items inside of this container 
} 

#logo 
{ 
    z-index: 1; 
} 

.container { 
    z-index: 2; 
    position: absolute; 
} 

.container ul li { 
    float: left; 
}

출처

2010-03-16 22:03:52

플로트를 왼쪽으로두고 상대적인 위치에 놓고 필요할 때까지 움직입니다.

출처

2010-03-16 22:00:04

위치 요소가 다른 것 아래

답변

관련 문제