위치 div는 오버플로를 허용합니다.

Question

다른 배경색으로 몇 개의 div가 있습니다. 이처럼

:

<div> 
<div class="bg-blue">Blue background</div> 
<div class="bg-orange">Orange Background</div> 
<div class="bg-white">White Background</div> 
<div class="bg-gray">Gray Background</div> 
</div> 

일부 CSS

.bg-blue { 
    width: 100%; 
    padding-bottom: 2%; 
    background-image: url(../img/blue.png); 
} 

.bg-orange, .bg-gray{ 
    width: 100%; 
    padding-bottom: 20%; 
    background-image: url(../img/orange.png); 
} 

.bg-gray { 
    background-image: url(../img/gray.png); 
} 
.bg-white { 
    width: 100%; 
    padding-bottom: 15%; 
    color: #fff; 
} 

지금 나는 오렌지와 흰색 배경 사업부를 통해 중복 싶은 이미지와 다른 사업부가있다.

그래서 지금 나는 오렌지 div 안에이 div를 만들거나 그저 아래에 만들어야한다고 생각하지 않습니다.

어떻게이 문제를 싫어할 수 있습니까?

Answer 1

는이 작업을 확인할 수 있고, 이것은 상대적인 위치 DIV에 위치한 absoulte이다.

http://jsfiddle.net/jd9j591r/

<div> 
    <div class="bg-blue">Blue background</div> 
    <div class="container"> 
    <div class="overlap"></div> 
    <div class="bg-orange">Orange Background</div> 
    <div class="bg-white">White Background</div> 
</div> 
<div class="bg-gray">Gray Background</div> 
</div> 

CSS

.bg-blue { 
    width: 100%; 
    padding-bottom: 2%; 
    background: blue; 
} 

.bg-orange, .bg-gray{ 
    width: 100%; 
    padding-bottom: 20%; 
    background: orange; 
} 

.bg-gray { 
    background: gray; 
} 
.bg-white { 
    width: 100%; 
    padding-bottom: 15%; 
    color: #fff; 
    background: white; 
} 

.container {position: relative;} 

.overlap {position: absolute; width: 40px; height: 160px; background: red; top: 10px; left:50px} 

Answer 2

당신은 주황색과 흰색 사이의 div를 추가 할 수 있지만 position:absolute을 사용하고 있기 때문에 문제 http://jsfiddle.net/kbo5fL9d/

<div class="bg-orange odd">Orange Background</div> 
<div class="image"></div> 
<div class="bg-white even">White Background</div> 

CSS 

.image{ 
position:absolute; 
background:yellow !important; 
width:100%; 
height:50px; 
margin-top:-30px; 
} 

Answer 3

사용을 없을 것이다 position: absolute 및 relative, 내 예를 JSBIN에있다. 또한

은 다음의 코드로, 중첩 div 유체의 높이를 만들 백분율에 padding-top 속성을 사용

가

.overlap {position:absolute; width:100%; background-color: red; padding-top: 25%; top:24px;}