배경 표지 이미지를 사용하여 상대 위치에서 CSS Z- 색인이 무시되는 이유는 무엇입니까?

Question

개요 : 내 페이지 상단에 CSS3 순수 네비게이션 시스템이 있습니다. 하단에 바닥 글/저작권이 있습니다.

중간에 나는 배경 이미지 (양피지) 표지를 원하고 그 양피지 맨 위에 왼쪽 열과 오른쪽 열이있는 텍스트의 흰색 레이어가 필요합니다. 내 Z- 인덱스가 작동하지 않는 것처럼 상대 위치를 사용하여 작동하도록 만들 수 없습니다. "fixed"위치를 지정하면 더 이상 올바른 브라우저 스크롤을 사용하여 아래로 이동할 수 없습니다. 위치 "절대"를 사용하면 배경이 오른쪽이고 상단의 내용은 정상이지만 내비게이션 바닥 글은 사라집니다. "상대"위치를 사용하면 내 탐색 시스템은 정상이지만 배경이 더 이상 표시되지 않습니다. 그것은 Z- 인덱스를 무시하고 있습니다 ....

이상한 것은 내가 표현 웹 4를 사용하고 있습니다. 거기 보이는 것이 정확합니다 ... 그것은 웹에서 정확하게 보이지 않습니다.

이것은 내가보고있는 것을 재현하는 내 사이트 html입니다.

<!-- #BeginEditable "content" --> 
<div id="page_content_back"> 
    <div id="column_left"> 
     <h1>About</h1> 

     <p>We are the best-Trust us</p> 


    </div> 
    <div id="column_right"> 
     <h4>CONTACTS</h4> 
    </div>   
</div> 
<!-- #EndEditable --> 

이

문제가 DIV 번호의 column_left입니다, 내 CSS를

#page_content_back { 
position: relative; 
background-image:url('../images/grayparchment_back.jpg'); 
background-size: cover; 
z-index: 1; 
width: 100%; 
margin: auto; 
padding: 0; 
border-top-width: 1px; 
border-top-style: solid; 
border-top-color: #CCAA77; 
} 
#column_left { 
position: relative; 
margin: 0 50px; 
padding: 0 2%; 
z-index: 2; 
top: 0px; 
background-color: #fff; 
float: left; 
width: 65%; 
height: 100%; 
color: #393939; 
} 
#column_right { 
position: absolute; 
z-index: 3; 
float: right; 
right: 50px; 
top: 370px; 
width: 20%; 
height: 100%; 
margin: 0; 
padding: 10px; 
background-color: #fff; 
} 

Answer 1

좋아합니다. 그것에는 float: left 속성이 있습니다. 요소를 플로팅하면 흐름에서 벗어나므로 div#page_content_back 안에는 아무 것도 없습니다. 내부 div에서 그 float: left 속성을 제거하면 이미지가 그 뒤에 표시됩니다. 거기에서 중첩 된 div 다음에 다른 요소를 추가 할 수 있으며 이미지가 확장되어 새 요소를 캡슐화합니다. 즉, float 또는 position: absolute을 사용하는 경우 흐름에서 요소를 제거하면 결과로 해당 배경 이미지가 응답하지 않습니다.