滑塊（旋轉木馬）與其他元素對齊

我已經建立了一個非常基本的單頁面網站，其中有一個幻想，一個滑塊（帶3個圖像的旋轉木馬）和一個頁腳。我的問題是，當滑塊淡入淡出圖像，因爲它是絕對定位，我不能從它下面的頁腳。滑塊（旋轉木馬）與其他元素對齊

滑塊重疊所有東西，我認爲這是有道理的，因爲它是絕對的。

我的問題是，如果明智地保持滑塊絕對定位（它允許jQuery工作，它的魔法淡入/淡出）和不同的位置我的頁腳...或者如果我應該完全重新工作滑塊。

HTML：

<div id="carousel"> 
    <img class="slideshow" src="img/slide2.jpg"> 
    <img class="slideshow" src="img/slide3.jpg"> 
    <img class="slideshow" src="img/slide1.jpg"> 
</div>

薩斯：

#carousel { 
    img { 
    background-position: center; 
    background-repeat: none; 
    background-size: cover; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    } 
} 

.slideshow { 
    display: hidden; 
    position: absolute; 
}

這裏是我的頁面的樣本（還有JS工作滑塊）上的jsfiddle：https://jsfiddle.net/josectello/7n8c5bq8/

謝謝巨大的提前。

來源

2015-10-23 Jose

可以保持絕對位置，但是使頁腳的z-index高於imgs，因此它將可見。

我希望我確實瞭解你的問題。

來源

2015-10-23 22:28:01

這有幫助！但是，當顯示尺寸發生變化時，頁腳會浮在滑塊前面並左右移動。不過謝謝你！ – Jose

然後給頁腳一個絕對位置和邊距。 –

這是一個簡單的修復。

補充一點：

// GLOBAL 
body { 
    background-color: black; 
    margin: 0 0 200px; 
} 

html { 
    position: relative; 
    min-height: 100%; 
}

您的頁腳更改爲絕對定位，並給它像這樣的高度：

footer { 
    @include module-style; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 200px; 
    width: 100%; 
}

這增加了一個棘手的頁腳頁面的底部，並避免衝突你的滑塊。

查看此CodePen的工作解決方案。

來源

2015-10-23 22:42:17

我看着CodePen，但它不完全正常工作。頁腳浮在滑塊的中間。我也在自己的代碼中嘗試過，仍然獲得浮動。 – Jose

滑塊（旋轉木馬）與其他元素對齊

回答

相關問題