CSS覆盖div与另一个div答案

【问题标题】：CSS overlay div with another divCSS覆盖div与另一个div
【发布时间】：2014-01-26 16:03:59
【问题描述】：

目标：我正在尝试将 div（蓝色 + 绿色）移动到横幅（红色）上方。

紫色 div 的内容量不同，所以它的高度是可变的。考虑具有固定高度的标题（黄色）和横幅（红色），以便您可以使用固定位置。

我的尝试是在 jsfiddle 中。

JsFiddle： http://jsfiddle.net/dEb3m/

这是最终输出。

横幅在背景中。新闻（绿色）相对于主要（橙色）

HTML：

<div id="header">header</div>
<div id="banner">banner</div>

<div id="search">search</div>

<div id="news">

    <div class="new_item">new 1</div>
    <div class="new_item">new 2</div>
    <div class="new_item">new 3</div>

</div>

<div style="clear: both;"></div>

<div id="main">main</div>
<div id="footer">footer</div>

CSS：

#header, #banner, #main, #footer {
    width: 400px;
}

#banner {
    height: 100px;
}

#search {
    width: 100px;
    float: left;
}

#news {
    display: inline-block;
    width: 300px;
}

.new_item {
    display: inline-block;
    float: left;
    min-height: 100px;
    width: 150px;
    max-width: 150px;
}

【问题讨论】：

这张图片对我来说简直是一团糟。我通常会去，但我什至不能告诉你整体想要什么。随机overflow 如果你不想要它，为什么不把第三个项目去掉呢？或者你想把它推到下面？所以不清楚。也许只有我，但这看起来像地狱。
目标：我正在尝试在横幅（红色）上方移动 2 个 div（蓝色 + 绿色）。
你的意思是像背景中的横幅？为什么不让横幅成为第一个容器？这不是你的图像所显示的
所以给#banner一个position:absolute;和一个z-index:-1;
为什么不使用position: relative 或position: absolute？

标签： javascript jquery html css

【解决方案1】：

您什么时候将 div（蓝色 + 绿色）移动到横幅（红色）上方？

如果一直是，可以使用如下CSS代码：

#banner {
    margin-bottom: -50px;
}

这里有一个jsFiddle 可以玩。

如果只是滚动时，可以使用如下CSS代码：

#banner {
    position: fixed;
    z-index: -1;
}
#search,
#news {
    margin-top: 100px;
}

这里有一个jsFiddle 可以玩。

干杯，托马斯。

【讨论】：

【解决方案2】：

解决方案：

JSFiddle demo

CSS：

#header, #banner, #main, #footer {width: 400px;}
#header {background-color: yellow;}
#banner {background-color: red;height: 50px;position:absolute;z-index:-1;}
#search {background-color: blue;width: 100px;float: left;margin-top:20px;}
#news {background-color: green;display: inline-block;width: 300px;overflow:hidden;white-space:nowrap;margin-top:20px;}
.new_item {
    vertical-align:top;
    white-space: normal;
    background-color: pink;
    display: inline-block;
    min-height: 100px;
    width: 150px;
    max-width: 150px;
}
#main {background-color: orange;}
#footer {background-color: silver;}

【讨论】：