html - 获取底部 div 以保持低于位置绝对 div

Question

bottom_wrapper 需要位于 top_wrapper 下面而不是在它里面!请帮助我!!

HTML:

enter code her  <div class="site_wrapper">
    <div class="top_wrapper">
        <div class="top_bar_wrapper">
            <div class="nav_bar_wrapper">
                <ul>
                    <a href="#"><li>About Me</li></a>
                    <a href="#"><li>Work</li></a>
                    <a href="#"><li>Clients</li></a>
                    <a href="#"><li>Contact</li></a>
                </ul>
            </div>
        </div>
    </div>
    <div class="bot_wrapper">
        <div class="article_wrap">
            <div class="article_title">
                <span>ABOUT<div class="second_word">me</div></span>
            </div>
        </div>
    </div>
</div>

CSS:

body{
 margin:0;
 padding:0;
 font-weight: 100;
 font-family: 'Open Sans', sans-serif;
 background-image: url(images/bg2.jpg);
}
.site_wrapper{
position:static;
}
.top_wrapper{
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
left:0;
right:0;
top:0;
position: absolute;
bottom: 100px;
}

.bot_wrapper{
position: relative;
margin-left: auto;
margin-right: auto;
width: 960px;
}

.nav_bar_wrapper ul{
margin: 0;
}

.nav_bar_wrapper li{
display: inline-block;
list-style-type: none;
padding: 15px;
-moz-transition: background-color .2s ease-in;
-webkit-transition: background-color .2s ease-in;
-o-transition: background-color .2 ease-in;
transition: background-color .2s ease-in;
}

.nav_bar_wrapper li:hover{
background-color: rgba(57, 181, 74, 0.5);
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}

.nav_bar_wrapper a{
color: #FFF;
font-size: 16px;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
}

.article_title span{
font-size: 50px;
font-family: 'Lato', sans-serif;
}

.second_word{
display:inline-block;
color:#39B54A;
}

bottom_wrapper 需要位于 top_wrapper 下面而不是在它里面!请帮助我!!

Answer 1

.top_wrapper{
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
left:0;
right:0;
top:0;
bottom: 100px;
}

从 top_wrapper 类中删除 position:absolute