How can I keep fixed element to document flow without breaking responsive layout?

Question

I have a responsive image slider at the top of my site, and I would like it to stay fixed. This way the user scrolls down and the content will scroll over the slider.

Here's a fiddle of my current setup

Normally I could do this with setting my div to position: fixed;, give a z-index: 20; to the main content and a margin-top to allow the content to be displayed after the slider, however this becomes tricky as my site is responsive.

When I resize the window, my slider will get smaller, but the margin-top will stay the same and create a huge gap between the slider and the content..

Answer 1

What I ended up doing was creating a blank PNG image at the exact width and height of the slider and inserting it just beneath the slider, and infront of the content. Leaving my HTML markup as something like this:

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

Then I gave these CSS styles to the PNG image:

.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