Divs Overlay 단순 구현

나는 테이블 셀에 앉아있는 div (id = placeholder)를 가졌고, 하나는 3 개의 중첩 된 div (content1, content2 및 content3)를가집니다. 이 중첩 된 div가 부모 (id = 자리 표시 자)와 동일한 크기로 서로 겹치기를 원합니다.Divs Overlay 단순 구현

가장 간단한 방법은 무엇입니까? 브라우저 간 솔루션을 찾고 있습니다.

HTML을

<table><tr><td> 

<div id='placeholder'> 
    <div id='content1' class='overlay'>...</div> 
    <div id='content2' class='overlay'>...</div> 
    <div id='content3' class='overlay'>...</div> 
<div> 

</td></tr></table>

출처

2011-12-28 Anonymous

CSS

.overlay { position: absolute; }

HTML

<div id='placeholder'> 
    <div id='content1' class='overlay'>...</div> 
    <div id='content2' class='overlay'>...</div> 
    <div id='content3' class='overlay'>...</div> 
<div>

그리고 당신은 높이가 테이블 셀을 스트레칭 셀 내부 clearfix해야합니다.

코드 : http://jsfiddle.net/v6Jnr/

UPD : 추가 된 크로스 브라우저 clearfix

코드 : 확인하기 위해`#의 placeholder`에 relative` : http://jsfiddle.net/v6Jnr/2/

출처

2011-12-28 15:13:32 Samich

당신은'위치를 던져 할 것인가 중첩 된 div는 다른 요소로 나뉘 지 않습니다? 아니면이 상황에서 불필요한가? –

그래, 어딘가에'position : relative'가 있어야합니다. 그렇지 않으면 절대 위치는 브라우저 창의 왼쪽 상단으로 기본 설정됩니다. –

@Samich 제가 게시 한 HTML보다 약간 더 복잡한 HTML을 보았습니다. 어떤 이유로 content2가 오버레이되는 것과 대조적으로 content1 아래에 표시됩니다. 문제가 뭔지 알아? –

Divs Overlay 단순 구현

답변

관련 문제