다른 배경 아래에 CSS 배경이 있지만 위에 있어야합니다.

Question

이상한 문제가 있습니다. 나는이 구조를 가지고 :

<div id="content"> 
    <div id="one"></div> 
    <div id="two"></div> 
</div> 

을 그리고 내 CSS에서 내가이 있습니다

#content { 
    position: relative; 
    background-image: url(content.png); 
} 
#content #one { 
    position: absolute; 
    background-image: url(one.png); 
} 
#content #two { 
    position: absolute; 
    background-image: url(two.png); 
} 

문제는 모든 배경은 내가 그들을 원하는 자신의 위치에서 렌더링을의 #content의 BG는 만 있음 #one 및 #two bg. 그러나 #content bg를 #one 및 #two 아래에 넣고 싶습니다. Z- 인덱스를 설정하려고했지만 이미 작동하지 않았습니다. 왜 그런가요? 어떻게 수정합니까?

W3C 검사기는 HTML과 CSS에 오류가 없음을 알려줍니다. 나는 FF6과 FF7, IE9로 테스트를했다.

Answer 1

잘 모르겠지만 z- 색인이 작동하려면 각 div를 상대적으로 배치해야합니다. 정적 요소의 기본입니다 :

myitem{ 
position:relative; 
z-index:x; 
} 

Answer 2

z-index 갈이 :`위치에서 작동하지 않음을 지정합니다.
이것은 의도적으로 설계된 것입니다.
더 잘 설명 할 수 없어서 미안합니다.

이 페이지에서 테스트 할 수 있습니다 http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

당신은 #page에 position: relative;을 사용해야합니다.

Answer 3

DIV '1'과 '2'가 '콘텐츠'상단에 있고 DIV '1'이 DIV '2'아래에있는 것을 보여주기 위해 약간 수정 한 CSS 코드입니다.

<style type="text/css"> 
    #content 
    { 
     position: relative; 
     background-image: url('images/banner10.jpg'); 
     height: 400px; 
     width: 600px; 
    } 

    #content #one 
    { 
     position: absolute; 
     background-image: url('images/flag.jpg'); 
     height: 200px; 
     width: 400px; 
     color: black; 
     font-weight: bold; 
     font-size: 100px; 
    } 

    #content #two 
    { 
     position: absolute; 
     background-image: url('images/banner18.jpg'); 
     height: 200px; 
     width: 400px; 
     top: 200px; 
     color: White; 
     font-weight: bold; 
     font-size: 100px; 
    } 
</style> 

이 HTML로

:

<div id="content"> 
    <div id="one">ONE 
    </div> 
    <div id="two">TWO 
    </div> 
</div> 

그리고 이것은 무엇을하는 모습입니다 같은 :

,536,

배경 문제가있는 경우 분명히 DIVS에 대한 CSS를 모두 표시하지는 않습니다 ... 실제로 볼 수 있듯이 문제가되는 다른 코드가 있어야합니다. 필자는 모든 주요 현대 브라우저에서이를 테스트했으며 정확히 동일하게 보입니다. 이 DIV 태그와 관련된 모든 CSS를 게시하면 도움이됩니다.