DIV 레이아웃 문제에 대한 html5/css3 DIV

Question

atached와 같이 4 등분으로 나누는 div 영역이 있습니다.

이제 위 div의 오버레이로 아래 영역에 배치 할 다른 div가 필요합니다. TV 아래쪽에있는 텍스트 스크롤 영역과 같이 4 개의 div로 구성된 TV 화면을 상상해보십시오.

5 개 div를 만들 수 있습니다. 이제 문제는 5 번째 div (스크롤 영역)가 2 개의 하위 div (3과 4)의 아래쪽 가장자리를 넘지 않는다는 것입니다. 나는 또한 Z- 인덱스도 넣었지만 실패했습니다.

누구나이 스타일을 지정하기위한 샘플을 공유 할 수 있습니다.

Answer 1

당신은 이런 식으로 해결할 수 :

HTML :

<div class="area"></div> 
<div class="area"></div> 
<div class="area"></div> 
<div class="area"></div> 

<div class="overlay"></div>​ 

CSS :

.area{ 
    float: left; 
    width: 49%;  
    height: 300px; 
    border: 1px solid black; 
} 

.overlay{ 
    width: 200px; 
    height: 100px; 
    background-color: blue; 
    clear: both; 
    position: absolute; 
    bottom: 30px; 
    margin: -100px; 
    left: 50%; 
} 
​ 

내가 하드 코딩 예제 값을 사용하고 있습니다. 실제 값은 마크 업이 포함 된 문맥에 따라 다릅니다.

Answer 2

코드가 없으면 작동하지 않는 것을 파악하기 어렵습니다. 난 당신이 내가했을 것입니다 원하는 것을 이해한다면 :

<div class="container"> 
    <div class="block1"></div> 
    <div class="block2"></div> 
    <div class="block3"></div> 
    <div class="block4"></div> 
    <div class="overlay"></div> 
</div> 

CSS :

이

.container { 
    position: relative; 
    width: 600px; /* use the size you want */ 
    height: 400px; 
} 

.container div { 
    position: absolute; 
    width: 50%; 
    height: 50%; 
} 

.container .block1 { top: 0; left: 0; background: pink; } 
.container .block2 { top: 50%; left: 0; background: red; } 
.container .block3 { top: 0; left: 50%; background: green; } 
.container .block4 { top: 50%; left: 50%; background: blue; } 

.container .overlay { 
    position: absolute; 
    width: 80%; 
    height: 100px; 
    left: 10%; 
    bottom: 30px; /* distance from the bottom */ 
    z-index: 1; 
    background: yellow; 
}