DIV 안쪽에있는 요소가

Question

실수로 삭제되었습니다.

나는 다음과 같은 HTML이 :

이

<div id="frame"> 
    <img src="sample.png" alt="" /> 
</div> 

CSS :

내가 할 노력하고있어

#frame { position: relative; z-index: 2; } 
#frame img { position: relative; z-index: 1; } 

, 상부에 위치 할 이미지의 부모 DIV를 얻을 수있다 (이 프레임의를). 그것은 CSS가 그것을하지 않는 것,하지만 왜? 이 작품을 어떻게 만들 수 있습니까?

Answer 1

부모 div에 설정된 높이를 지정하고 결과를 확인합니다.

Answer 2

요소의 자식 요소는 부모보다 더 높은 스태킹 순서를 가지므로 자연히 (html 요소의 자식 요소는 html의 TOP에 표시되어야합니다.

img에 -1이라는 z- 색인을 설정하면 자연스러운 동작을 상쇄 할 수 있습니다.

편집 : 다른 "콘텐츠"를 묶거나 다른 래퍼를 사용하면 안되는 이유는 무엇입니까? 이상적인 해결책이 될 것입니다. 그렇지 않으면 해킹 그 방법을

<div id="parent"> 
    <div id="frame"></div> 
    <div id="child"></div> 
</div> 

편집 # 2로을 의미 자연 스택 순서 행동, 주위 이동하려는 : -1 작품의 내가 바로 모든했다 추측 함께, Z- 인덱스 또한 : http://jsfiddle.net/yBH2G/1/

Answer 3

"프레임"과 이미지를 div 자체에 넣지 않는 이유는 무엇입니까?

#box img, #box #frame { 
    position:relative; 
} 
#box #frame { 
    z-index: 100; 
} 

<div id="box"> 
    <div id="frame"></div> 
    <img src='image.jpg' /> 
</div> 

Answer 4

당신은 당신이 (이전 버전의 브라우저에서 작동하지 않을 수 있습니다) 원하는 것을 얻을 수 있습니다

#frame { ... no special css (but background should be [semi-]transparent) ... } 
#frame img { position: relative; z-index: -1; } 

참고 부정적인z-index 수. 이것이 일부 브라우저에 문제가있는 이유입니다. 그러나 모든 최신 브라우저가이 문제를 올바르게 처리합니다.

@Edit : 여기 파이어 폭스 3.6, IE8, 사파리 4 작동하는 테스트 케이스의 (IE6 포함하는 요소를 가지고 있지하는 & 7 필요하면이 위치, 즉, 그것은 일하러 가야 position: static해야합니다)

<div style="border: 5px solid red; width: 190px; height: 190px; position: relative; zoom: 1; margin: 20px">Example Text 
<div style="position: absolute; z-index: -1; width: 200px; height: 200px; background-color: blue; opacity: .7; top: -10px;"></div> 
</div>