如何在不破壞響應式佈局的情況下將固定元素保留到文檔流？

Question

我在我的網站頂部有一個響應式圖像滑塊，我希望它保持不變。這樣用戶向下滾動，內容將在滑塊上滾動。

Here's a fiddle of my current setup

通常，我能做到這一點與我的div設置爲position: fixed;，給z-index: 20;的主要內容和margin-top，使滑塊後要顯示的內容，但是這將成爲棘手，因爲我的網站是響應。

當我調整窗口的大小，我的滑塊會變小，但上邊距將保持不變，並創建滑塊和內容之間的巨大差距..

Answer 1

我最終什麼事做了創建在滑塊的確切寬度和高度處插入空白PNG圖像，並將其插入滑塊下方和內容的正面。離開我的HTML標記爲這樣的事情：

<div class="slides-wrapper"> 
    <!-- slider content --> 
</div> 
<div class="slides-invisible"> 
    <img class="invisible" src="img/invisible.png" alt=""> 
</div> 

然後我給這些CSS樣式PNG圖像：

.invisible { 
    max-width: //max-width of your slider/image; 
    height: 100%; 
    width: 100%; 
} 

For more information on what I did here's a blog post about it