如何在不破坏响应式布局的情况下将固定元素保留在文档流中？

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