對齊多個div元素在彼此上方，同時保持反應

Question

我想作以下div元素更加敏感： http://jsfiddle.net/7q5eevpt/

眼下，在小屏幕上觀看時，梯形重疊的圖像。 我怎樣才能得到它，以便梯形圖在圖片下彈出並坐在那裏？這是我想看起來像這樣：

基本上，我想要梯形在橙色欄下居中。

這是我的CSS

#home-feature5 { 
    height:618px; 
    width:1210px; 
    position:relative; 
    max-width: 100%; 
} 
.photo { 
    bottom: 37px; 
    position: absolute; 
    z-index: 1; 
    left: 20px; 
    max-width: 100%; 
} 
.photo img { 
    max-width:100%; 
    height:auto; 
} 
.bg { 
    background-color:#f88b5c; 
    width:100%; 
    height:95px; 
    bottom:0; 
    left:0; 
    position:absolute; 
} 

    .trap5 { 
    width: 450px; 
    height: 200px; 
    position: absolute; 
    text-transform:uppercase; 
    text-align:center; 
    bottom:5%; 
    z-index:4; 
    right:5%; 
} 
.trap5:before { 
    content: ""; 
    position: absolute; 
    border-radius: 2px; 
    box-shadow:0 1px 0px 5px #1c628f; 

    top: -4%; bottom: -11%; left: -3%; right: -3%; 
    z-index: ; 

    -webkit-transform: perspective(50em) rotateX(-30deg); 
    transform: perspective(50em) rotateX(-30deg); 
} 
    .trap5header { 
    font-family:"AmericanTypewriterStd", sans-serif; 
    color:#1c628f; 
    font-size:18pt; 
    text-align:center; 
    text-transform:uppercase; 
    font-weight:600; 

    } 

    .trap5text { 
    font-family:"Scout", sans-serif; 
    font-size:10pt; 
    text-transform:uppercase; 
    text-align:center; 
    letter-spacing: 1px; 
    } 

@media screen and (max-width: 480px) { 
.trap5 { 
     position:relative; 
    } 

} 

Answer 1

基本上擺脫所有的絕對定位的元素的。我的意思是所有。如果你希望它能夠做出反應，那就用百分比而不是固定大小來思考。

所以，你的CSS是如此簡單：

#home-feature5 { 
    height:auto; 
    width:auto; 
    position:relative; 
    max-width: 100%; 
    text-align:center; 
} 
.photo { 
    top: 0px; 
    position:relative; 
    z-index: 1; 
    left: 0px; 
    width: 100%; 
} 
.photo img { 
    max-width:100%; 
    height:auto; 
} 
.bg { 
    background-color:#f88b5c; 
    width:100%; 
    height:95px; 
    bottom:0; 
    left:0; 
    position:relative; 
} 
.trap5 { 
    width: 450px; 
    height: 200px; 
    position:relative; 
    text-transform:uppercase; 
    text-align:center; 
    top:5%; 
    z-index:4; 
    margin:10px auto 30px; 
} 
.trap5:before { 
    content:""; 
    position: absolute; 
    border-radius: 2px; 
    box-shadow:0 1px 0px 5px #1c628f; 
    top: -4%; 
    bottom: -11%; 
    left: -3%; 
    right: -3%; 
    z-index:; 
    -webkit-transform: perspective(50em) rotateX(-30deg); 
    transform: perspective(50em) rotateX(-30deg); 
} 
.trap5header { 
    font-family:"AmericanTypewriterStd", sans-serif; 
    color:#1c628f; 
    font-size:18pt; 
    text-align:center; 
    text-transform:uppercase; 
    font-weight:600; 
} 
.trap5text { 
    font-family:"Scout", sans-serif; 
    font-size:10pt; 
    text-transform:uppercase; 
    text-align:center; 
    letter-spacing: 1px; 
} 
@media screen and (max-width: 480px) { 
    .trap5 { 
     position:relative; 
    } 
} 

see fiddle here

編輯：只是一個小的修爲FULL響應行爲。

.trap5 { 寬度：50％; 身高：自動; max-width：450px; max-height：200px; 位置：相對; text-transform：大寫; text-align：center; top：5％; z-index：4; margin：10px auto 30px; }

of course width:50% could be changed to anything, it's just an example, the important part is it won't be wider than 450px width