왜 Z- 인덱스가 작동하지 않습니까?

가능한 중복 :
z-index not working with fixed positioning 왜 Z- 인덱스가 작동하지 않습니까?

내가 고정 된 머리글과 바닥 글과 고정 된 왼쪽 사이드가있는 응용 프로그램을 만드는 오전. z-index 속성이 작동하지 않는 것을 제외하고는 모두 괜찮습니다. 머리글과 바닥 글의 Z- 색인을 1000으로 설정하고 기본 div의 Z- 색인을 1로 설정했습니다. 따라서 머리글과 바닥 글은 .main div에 쌓여 야합니다. 그러나 결과는 동일하지 않습니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Sample Title</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 
    <body> 
    <div class="header fixed-top"> 
     <div class="header-inner"> 
     <ul class="nav"> 
      <li> 
      <a href="#">Link 1</a> 
      </li> 
      <li> 
      <a href="#">Link 2</a> 
      </li> 
      <li> 
      <a href="#">Link 3</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    <div class="sidebar-left-fixed">This is the left sidebar. This should remain fixed.</div> 
    <div class="main">And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br /></div> 
    <div class="footer fixed-bottom"> 
     <div class="footer-inner">footer</div> 
    </div> 
    </body> 
</html>

그리고이 CSS :

a{ 
color: #777; 
text-decoration: none; 
text-shadow: 0 1px 0 white; 
} 
body { 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-size: 14px; 
line-height: 20px; 
color: #333;padding:0; 
margin:0; 
} 
ul{ 
margin:0;padding:0; 
position:relative; 
list-style-type:none; 
} 
li{float:left} 
.nav > li > a{padding: 10px 15px 10px;} 
.fixed-top{ 
position:fixed; 
top:0;right: 0; 
left: 0; 
z-index:1000; 
} 
.fixed-bottom{ 
position: fixed; 
right: 0; 
left: 0; 
margin-bottom: 0;bottom: 0; 
z-index:1000; 
} 
.header-inner{ 
border-bottom:solid 1px #eee; 
min-height: 40px; 
z-index:1000; 
position:relative; 
} 
.footer-inner{ 
border-top:solid 1px #eee; 
min-height: 80px; 
position:relative; 
z-index:1000; 
} 

.sidebar-left-fixed{ 
position:fixed; 
left:0; 
width:250px; 
border-right:solid 1px #eee; 
height:100%; 
top:40px; 
} 
.main{ 
margin-top:40px; 
margin-left:250px; 
margin-right:0; 
min-height:600px; 
border-right:solid 1px #eee; 
border-bottom:solid 1px #eee; 
padding:5px; 
z-index:1; 
position:relative; 
}

참고 :이 디자인을 얻을 수있는 다른 좋은 방법이 있다면, 그것은 환영합니다.

출처

2013-01-02 Hardeep Singh

이런 뜻이야? http://jsfiddle.net/7gK5U/2/ –

합니다. 그렇지 않으면 잘 작동합니다.

출처

2013-01-02 08:09:40

권자. 그거 좋았어! –

그냥이 마크 업이 그러한 시나리오에 적합한 지 확인하거나 다른 것이 더 낫습니까? –

작동하는 것처럼 보입니다 만, 머리말/꼬리말에 배경 (색상)이 없음이 유일한 것입니다. 투명하게되면 콘텐츠를 볼 수 있습니다.

머리글과 바닥 글에 배경색을 추가하면 그 아래에 내용이 표시됩니다.

출처

2013-01-02 07:49:33 morksinaanab

나는 morksinaanab에 권리가 있다고 생각하지만, 채우기 맨 아래에 .main을 추가 할 수도 있습니다. 추가보십시오 : 당신은 머리글, 바닥 글 및 사이드 바 부분에 대한 배경 색상을 부여하지 않는

.main { 
/* Your code */ 
padding-bottom: 85px; } /* the height of padding should be at least the same amount that footer height + 5px for space */

출처

2013-01-02 08:07:56 bumerang

왜 Z- 인덱스가 작동하지 않습니까?

답변

관련 문제