div의 바닥 글 뒤에이 CSS 코드를 사용하여

Question

메신저 표시됩니다

/* status update page style */ 
#content_wrapper { 
    display: inline; 
    width: 80%; 
    padding: 0; 
    margin: 0 auto; 
} 
#content_update { 
    display: block; 
    float: left; 
    padding: 20px; 
    margin-top:20px; 
    width: 100%; 
    background-color: #eee; 
    border-radius: 10px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.5); 
} 
#content_maintainance { 
    display: block; 
    float: left; 
    padding: 20px; 
    margin-top:20px; 
    width: 100%; 
    background-color: #eee; 
    border-radius: 10px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.5); 
} 
#content_sidebar { 
    display: block; 
    float: right; 
    width: 230px; 
    padding: 20px; 
    background-color: #eee; 
    border-radius: 10px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.5); 
} 

/* FOOTER */ 
#footer { 
    width:100%; 
    height:580px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    border-top:4px solid #ed1c24; 
    background-color:#eeeeee; 
} 

#footer-inner { 
    width:80%; 
    margin:0 auto 0 auto; 
    height:inherit; 
} 
#footerTop { 
    width:100%; 
    height:480px; 
    padding-top:10px; 
    border-bottom:2px #000000 solid; 
} 
#footerTopLeft { 
    width:30%; 
    height:420px; 
    float:left; 
    display:inline; 
    margin-top:10px; 
    padding:0 15px 10px 15px; 
    border-right:1px solid #000000; 
} 
#footerTopMid { 
    width:30%; 
    height:420px; 
    float:left; 
    display:inline; 
    margin-top:10px; 
    padding:0 15px 10px 15px; 
    border-right:1px solid #000000; 
} 
#footerTopRight { 
    width:30%; 
    height:420px; 
    float:left; 
    display:inline; 
    padding:0 15px 10px 15px; 
} 

을하지만 div의 바닥 글 div를 뒤에 표시됩니다. 난 당신이 너무 html로 볼 수 있도록 여기에 바이올린을 만들었습니다 - 당신은 항상 이러한 요소를 사이트의 다른 부분을 커버 할 수 있음을 알고 있어야 position:absolute 또는 fixed 작업 할 때 http://jsfiddle.net/wmrhC/

Answer 1

을, 당신은 수동으로 깊이를 관리해야

z-index 속성을 사용하면됩니다.

푸터 부분이 모든 콘텐츠 아래에 표시되도록하려는 경우

는이 같은 Z-index 속성을 추가 할 수 있습니다

#footer { 
    /* other styles */ 
    z-index: -1; 
} 

이가하는 문제 "내용이 뒤에 표시"로 해결, action

비록 노트에를 참조하십시오. 그러나 귀하의 페이지를 보면서 해결해야 할 더 많은 위치 결정 문제가 있습니다.

Answer 2

580px 높이의 브라우저 창 하단에 바닥 글 div을 절대적으로 배치했기 때문입니다. 이것은 일반적인 문서 흐름에서 div을 가져옵니다. 이는 다른 요소가 뒤에 숨겨지기 시작할 수 있음을 의미하며, 580px 높이이므로 페이지의 대부분의 다른 요소는 뒤에 숨어 있습니다. 바닥 글의 z-index을 바닥 글에 -1으로 설정하면 문제를 해결할 수 있습니다.하지만 이는 아마도 div이 바닥 글의 맨 위에있는 바닥 글의 맨 위에 떠 다니기 시작한다는 것을 의미하기 때문에 나중에있는 것만은 아닙니다. 아직도 꽤 보이지 않습니다.

당신은 현재 설정 한 절대 위치를 제거하고, 어쩌면 당신이 바닥에 대신 페이지의 바닥에 붙어 바닥 글을 설정하게됩니다 접근에 대한 CSS sticky footer 같은 볼을하셔야합니다 브라우저 창의

Answer 3

다른 답변에서 말한 것처럼, 바닥 글 div가 fixed이 되었기 때문입니다. (HTML 및 CSS에 대한)이 선을 따라 뭔가 페이지 누워 아웃 도움이 될 것입니다

... 
.wrapper { 
    position: relative; 
    float: left; 
    left: 5.00%; 
    width: 90.00%; 
    background-color: #cccccc 
} 
.left1 { 
    position: relative; 
    float: left; 
    left: 0.50%; 
    width: 32.00%; 
    background-color: #ccccff 
} 
.left2 { 
    position: relative; 
    float: left; 
    left: 1.50%; 
    width: 32.00%; 
    background-color: #ccccff 
} 
.right { 
    position: relative; 
    float: right; 
    right: 0.50%; 
    width: 32.00%; 
    background-color: #ccccff 
} 
.footer { 
    position: relative; 
    float: left; 
    left: 5.00%; 
    width: 90.00%; 
    margin: 10px 0px; 
    background-color: #cfcfcf 
} 
... 

: JSFiddle demo

이는 CSS (전체 코드의 JS 바이올린 참조)입니다 보시다시피,이 항목들 중 어느 것도 absolute 또는 fixed에 위치하지 않습니다.

끈적한 바닥 글을 만드는 방법을 설명하는이 링크도 확인하시기 바랍니다. CSS Sticky footer (다른 답변에 표시된대로).