jquery - 如何实现在主要内容后面放置一个 slider ？

Question

我正在做一个新元素。有一些标记，我不知道如何实现。

您可以看到下图。所以标记如下:有一个标题和主要内容区域。

主要内容区域将包含一些元素条目和关于我们的文本(草图中的蓝色框)。但是上面的部分比较复杂。白色条(见图片)是站点标题，红色区域是包含一篇最新新闻文章的 block 。在这些元素的后面应该显示一个带有一些图像的 slider ，就像我下面草图中的十字线一样。 slider 没有标题，只有图像轮播。标题和新闻 block 应该保持完整，因此这些元素应该始终位于 slider 的顶部。

提出了以下标记:

<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 -->

有没有人对如何实现这一目标有一些建议？我目前正在尝试一些东西，所以我还没有一个例子，我很抱歉。也许我应该对 z-index 做些什么？

更新:

在这里你可以看到我的标记:http://codepen.io/anon/pen/yNQapY红色 block 应覆盖 slider ，包装器的高度应最大为 800 像素。

Answer 1

确保设置父 DIV(包含幻灯片和标题/文章的那个)position: relative;。然后标题和文章的位置应该设置为绝对的。我还认为幻灯片的元素符号导航应该放在 slider 部分内。

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 -->

检查我的 jsfiddle:http://jsfiddle.net/huLo6d7v/