Javascript HTML CSS内容div won'；不要浮在水面上

我试图将content div放置在两个背景div上，但我的代码只将其设置在底部div上。下面有两个图像，显示了我想要实现的目标和正在发生的事情

图1：我想要实现的目标

图2：问题

HTML:

---

这可以简化代码并复制所描述的布局：

CSS:

HTML:

导航

---

而JSFIDLE就是从这里开始的，您可以根据自己的需要对其进行调整。

中间的<代码>中间的<代码>和<代码>内容之间有什么关系吗？或者中间的<代码>和<代码>中间的<代码>只是为了装饰？只是为了装饰。它们应该只作为背景，即上半部分=中间部分和下半部分=中间部分。我在代码中没有看到任何z索引。这样你就可以像在照片里一样把它们叠起来。多亏了你的回答，我才知道我的错误是什么。通过将“middlebottom”div放在“middlebottom”div之外，我实现了我所期望的效果。你的代码也澄清和简化了我的一些东西。

<div class="middle">
<div class="middle_bot">


    <div id="content">
        <p class="big">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Curabitur tellus felis, sagittis at neque placerat, 
        laoreet mollis massa. Sed et purus mollis, fringilla 
        tellus et, tincidunt eros. Ut dolor ipsum, feugiat et 

        </p>
    </div>
</div>
</div>

.middle
{

background-image: url(images/bg_middle.png); /* fallback */
background-image: url(images/bg_middle.png), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#009dca)); /* Saf4+, Chrome */
background-image: url(images/bg_middle.png), -webkit-linear-gradient(top, #000000, #009dca); /* Chrome 10+, Saf5.1+ */
background-image: url(images/bg_middle.png),    -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6+ */
background-image: url(images/bg_middle.png),     -ms-linear-gradient(top, #000000, #009dca); /* IE10 */
background-image: url(images/bg_middle.png),      -o-linear-gradient(top, #000000, #009dca); /* Opera 11.10+ */
background-image: url(images/bg_middle.png),         linear-gradient(to bottom, #000000, #009dca); /* W3C */

    /*background-color:blue;
    background-repeat: repeat;
    background: url(images/bg_middle.png);*/
    height: 40%;
    width: 100%;
}

.middle_bot
{

background-image: url(images/bg_middle2.png); /* fallback */
background-image: url(images/bg_middle2.png), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff)); /* Saf4+, Chrome */
background-image: url(images/bg_middle2.png), -webkit-linear-gradient(top, #000000, #ffffff); /* Chrome 10+, Saf5.1+ */
background-image: url(images/bg_middle2.png),    -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6+ */
background-image: url(images/bg_middle2.png),     -ms-linear-gradient(top, #000000, #ffffff); /* IE10 */
background-image: url(images/bg_middle2.png),      -o-linear-gradient(top, #000000, #ffffff); /* Opera 11.10+ */
background-image: url(images/bg_middle2.png),         linear-gradient(to bottom, #000000, #ffffff); /* W3C */

    /*background-color:blue;
    background-repeat: repeat;
    background: url(images/bg_middle2.png);*/
    height: 50%;
    bottom:0;
    position:absolute;
    width: 100%;
}

#content
{
    background: url(images/content2.png);
    width: 800px;
    padding: 10px;
    border: 1px solid #373737;
    margin: 0;
    word-wrap: break-word;
    margin-left: auto ;
    margin-right: auto ;
    box-shadow: 2px 2px 2px #000000;
}

 #Navigation{
    height:50px;
    width:100%;
    color:white;
    text-align:center;
    background:black;}

#Middle{
    height:200px;
    overflow:visible;
    background:brown;}

#Content{
    margin:0px auto;
    width:200px;
    height:300px;
    position:relative;
    background:blue;}

#MiddleBottom{
    height:200px;
    background:green;}

<div id="Navigation">navigation<div>

<div id="Middle">
    <div id="Content"></div>    
</div>

<div id="MiddleBottom"></div>