Javascript CSS覆盖div与另一个div

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

紫色div的含量不同，所以它的高度是可变的。 考虑标题（黄色）和横幅（红色）的固定高度，这样你就可以使用固定的位置。 我的尝试是在JSFIDLE

JsFiddle:

这是最终输出

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

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>

#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;
}

---

您何时将div（蓝色+绿色）移到横幅（红色）上方

如果始终为，则可以使用以下CSS代码：

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

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

这是一个可以玩的游戏

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

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

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

这是一个可以玩的游戏

干杯，

---

托马斯。

解决方案：

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

#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;
}

CSS:

---

在我看来，这张照片简直是一团糟。我通常会试一试，但我甚至不知道你想要什么。Random

overflow

如果你不想要第三项，为什么不干脆扔掉它呢？还是你想把它压下去？太不清楚了。也许只有我，但这看起来像地狱。目标：我试图移动横幅（红色）上方的2个div（蓝色+绿色）。你的意思是像背景中的横幅？为什么不把横幅作为第一个容器呢？这不是你的图像所显示的，所以给

#banner

一个

位置：绝对和a
z-index:-1为什么不使用
位置：相对
或
位置：绝对
？