How to achieve position a slider behind the main content?

Question

I am working on a new project. There is some markup and I don't know how to achieve this.

You can see the image below. So the markup is as follow: There is a header and main content area.

The main content area will contain some project entries and an about us text (the blue box in the sketch). But the above part is more complex. The white bar (see image) is the site header and the red area is a block that will contain one latest news article. Behind those elements there should be display a slider with some images, like the crosser in my sketch below. The slider doesn't have captions, only a carousel of images. The header and news block should be in tact, so those element should always on top of the slider.

Came up with the following markup:

<div class="fluid-container background">
        <section class="slider">
            <div class="flexslider">
                <ul class="slides">
                    <li>
                        <img src="images/slide2.jpg" />
                    </li>
                    <li>
                        <img src="images/slide2.jpg" />
                    </li>
                    <li>
                        <img src="images/slide2.jpg" />
                    </li>
                    <li>
                        <img src="images/slide2.jpg" />
                    </li>
                </ul>
            </div>
        </section>

        <div class="container">
            <header id="header" class="row">
                <div class="toggle-menu">
                    <div>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <img src="toggle-menu.png" alt="Toggle-menu">
                </div><!-- End div.toggle-menu -->

                <nav id="primary-navwrapper">

                </nav><!-- End nav#primary-navwrapper .col-md-12 -->

            </header><!-- End header#header .row -->

            <section class="row">
                <article class="col-md-4 col-md-offset-8">
                    <p>THE NEWS BLOCK LIKE THE RED ONE</p>
                </article><!-- End article.col-md-4 -->

            </section><!-- End section.row -->

        </div><!-- End div.container -->

    </div><!-- End div.fluid-container -->

<main class="container">
 <p>This is like the blue block</p>
</main><!-- End main.container -->

Does anyone have some suggestions how to achieve this? I am currently trying something, so I haven't yet an example, my apologize. Maybe I should do something with z-index?

UPDATE:

Here you can see my markup: http://codepen.io/anon/pen/yNQapY The red blocks should overlay the slider, and the wrapper should be max 800px height.

Answer 1

Make sure to set the Parent DIV's (the one that holds the Slideshow and the header/article) position: relative;. Then the header and the article's position should be set to absolute. I also think the Slideshow's bullet navigation should be placed inside the slider section.

CSS

.fluid-container {
    position: relative;
}

.slides {
    width: 500px;
    height: 250px;
    overflow: hidden;
    list-style-type:none;
}

.slides li {
    float:left;
}

.container {
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
}

.toggle-menu {
    text-align: center;
}

HTML

<div class="fluid-container background">
        <section class="slider">
            <div class="flexslider">
                <ul class="slides">
                    <li>
                        <img src=" http://placehold.it/500x250" />
                    </li>
                    <li>
                        <img src=" http://placehold.it/500x250" />
                    </li>
                    <li>
                        <img src=" http://placehold.it/500x250" />
                    </li>
                    <li>
                        <img src=" http://placehold.it/500x250" />
                    </li>
                </ul>
            </div>

                <div class="toggle-menu">
                    <div>
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                    </div>
                    <img src="toggle-menu.png" alt="Toggle-menu" />
                </div><!-- End div.toggle-menu -->
        </section>

        <div class="container">
            <header id="header" class="row">


                <nav id="primary-navwrapper">

                </nav><!-- End nav#primary-navwrapper .col-md-12 -->

            </header><!-- End header#header .row -->

            <section class="row">
                <article class="col-md-4 col-md-offset-8">
                    <p>THE NEWS BLOCK LIKE THE RED ONE</p>
                </article><!-- End article.col-md-4 -->

            </section><!-- End section.row -->

        </div><!-- End div.container -->

    </div><!-- End div.fluid-container -->

<main class="container">
 <p>This is like the blue block</p>
</main><!-- End main.container -->

Check my jsfiddle: http://jsfiddle.net/huLo6d7v/