具有位置的CSS3布局：絕對壓低內容

Question

我有一個響應頁面，需要在其中插入不同高度的各種內容：

• 上部是帶有漸變疊加（紅色）的圖像。

• 在它的下面是一個具有相同顏色（藍色）的div，因此看起來這兩個div之間的平滑過渡。

問題在於，內容（黃色）需要根據黃色div中的內容量來下推藍色div，但是黃色div需要position: absolute要在其所在position: absolute顯示。

這在純CSS中可行嗎？ 還是我需要JavaScript來計算藍色div的高度？

這是我的小提琴。

HTML

<div class="pr">
    <img src="http://www.cphrecmedia.dk/musikdk/stage/demobilleder/detartistchannel2.jpg">
    <div id="campaignreleases"></div>
    <img id="camlogo" src="http://www.cphrecmedia.dk/musikdk/stage/css/lyttesession.svgz" alt="MusikDK logo">
</div>
<div id="camrel">
    <img src="http://www.cphrecmedia.dk/musikdk/stage/demobilleder/detlyttealbum.jpg" alt="ALBUMNAME">
    <p>Below I need to add whatever I'll need. So basically it needs to push down the "camrel" div, but all this content also needs to be positioned just below the logo (inside the "pr" div)</p>
</div>

CSS

body {
    background: #ddd
}
.pr {
    position: relative;
    width: 800px
}
.pr img {
    width: 100%
}
#campaignreleases {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: -moz-linear-gradient(top, rgba(26, 188, 156, 0.2) 0%, rgba(26, 188, 156, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 188, 156, 0.2)), color-stop(100%, rgba(26, 188, 156, 1)));
}
#camlogo {
    position: absolute;
    -webkit-transform: translateX(-50%);
    left: 50%;
    top:15%;
    opacity: 1 !important;
    max-width: 500px
}
#camrel {
    background: #1ABC9C;
    text-align: center;
    overflow: auto;
}
#camrel img {
    width: 250px;
    .roundedcorners;
}

Answer 1

純CSS可以做到這一點，但是您需要改變CSS的方式。 紅色和藍色div必須position: absolute; 由於它們的高度不變，因此黃色div應該具有position: relative; 因為那div將設置文檔的高度。

這樣您可能會遇到背景色問題。 但這可以通過為主體賦予與藍色div相同的背景色來解決。

如果不清楚，或者您仍然不知道該怎么做，請告訴我。 我很樂意提供幫助。

---

編輯：我已經使用您的工具創建了一個小提琴 ，以創建我上面解釋的內容。

Answer 2

這是我對背景假元素與一些z-index結合以獲得簡單布局的設計的看法。 .content:after是position:fixed以保持附着到視口以保持一致的漸變。

有一個例子！

HTML

<div class="wrap">
    <div class="header">
        <img id="camlogo" src="image-source" alt="MusikDK logo">
    </div>

    <div class="content">
        <!-- fill me up! -->
    </div>
</div>

CSS

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #ddd;
}
.wrap {
    width: 800px;
    margin: 0 auto;
}
.header {
        background: url(http://www.cphrecmedia.dk/musikdk/stage/demobilleder/detartistchannel2.jpg) center 0 no-repeat;
    height: 600px;
    background-size: 800px;
    z-index: -3;
    position: relative;
}
.content:after {
    content: '';
    height: 100%;
    display: block;
    background: -moz-linear-gradient(top, rgba(26,188,156,0.2) 0%, rgba(26,188,156,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(26,188,156,0.2)), color-stop(100%,rgba(26,188,156,1)));
    position: fixed;
    bottom: 0;
    z-index: -2;
    left: 50%;
    width: 800px;
    margin-left: -400px;
}
#camlogo{
    position: absolute;
    -webkit-transform: translateX(-50%);
    left: 50%;
    top:10%;
    opacity: 1 !important;
    max-width: 500px
}
.content {
    margin-top: -400px;
    padding: 0 200px;   
}