重叠内容当窗口调整大小时，从第一个Div到第二个Div

Question

这是我想要建立的网站 http://sorchus.com/securestuff/buggy/home/

正常的布局很好但是当你重新调整窗口大小时，home div的竞争重叠了t_sol div

如何修复

代码Html

<div id="home" class="tabs">
        <div id="scfix">

        <ul id="slider">
            <li>
                <div id="home_cnt">
                    <h1>pan-asian social media training specialists</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, debitis mollitia corporis illo dolore doloribus eius dolorum laudantium quod minus porro repellendus laboriosam facilis nemo ut sapiente amet nesciunt vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, </p>
                    <h2>Hop in! Learn more &#x25B6</h2>
                </div>
            </li>

        </ul>
        </div>
    </div>
    <br>
    <div id="t_sol" class="tabs">
        <div id="scfix">
        <h2>Re-Define Yourslelf?</h2>
        <img src="../cdn_images/stocks/corporate-team.jpg">
        <h3>Our Tailored Solutions</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, quas, temporibus, esse illo doloribus maiores eligendi perferendis expedita dolore nihil molestiae veritatis distinctio cupiditate porro excepturi debitis consequuntur. Ducimus, recusandae.</p>
        <h4>Learn More.. &#x25B6</h4>

        </div>
    </div>

CSS

    img {
        width: 100%;
        height: 100%;
    }

    /*font Smoothing*/
    html,html a {
        -webkit-font-smoothing: antialiased;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
        font-smooth: always;
    }

    /*eof Font Smooting*/
    #background {
    background-repeat: no-repeat;
        content: '';
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        /*height: 100% !important;*/
        width: 100% !important;
        z-index: -5;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    html,body {
        height: 100%;
    }

    .tabs {
        border: 1px solid #bada55;
    }
    #scfix {
        height: 100% !important;
        width: 100% !important;
    }

    #home {
        background-color: rgba(255,140,0,0.2);
        background-color: rgba(0,0,0,0.5);
        background-color: rgba(255,255,255,0.8);
        height: auto;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: visible;
    }

    #footer {
        background-color: orange;
        height: auto;
    }

/*Home Content*/
#home_cnt h1 {
    clear: both;
    font-family: 'sansationbold','calibri';
    font-size: 50px;
    text-align: center;
    text-transform: uppercase;
    padding-top: 150px;
    color: rgba(255,255,255,0.8);
    color: rgba(0,0,0,0.9); /*text-shadow:  7px 7px 7px rgba(150, 150, 150, 0.81);
    */
}

#home_cnt h1:after {
    clear: both;
    content: ' ';
    display: block;
    width: 800px;
    height: 1px;
    margin: 20px auto 24px;
    padding: 0;

    background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%);
    background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%);
    background-image: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%);
    background-image: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%);
    background-image: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255,255,255,0)), color-stop(0.5, rgba(255,255,255,0.6)), color-stop(1, rgba(255,255,255,0)));
}

#home_cnt p {
    clear: both;
    width: 80% !important;
    color: rgba(255,255,255,0.9);
    color: rgba(0,0,0,0.9);
    font-size: 30px;
    font-family: 'sansationlight','calibri';
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

#home_cnt h2 {
    clear: both;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin-top: 20px;
    color: white;
    font-size: 30px;
    font-family: 'sansationregular','calibri';
    background: #f89600;
    vertical-align: middle;
    padding: 10px;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}




/*eof Home Contend*/
#t_sol {/*
    width: 80%!important;*/
    clear: both;
}

#t_sol img{
    position: absolute;
    z-index: 5;
    width: 60%!important;
    height: auto;
    float: left;
}

#t_sol h2 {
    margin-left: auto;
    margin-right: auto;
    padding-top: 52px;
    font-size: 50px;
    text-align: center;
    font-size: 45px;
    font-family: 'sansationbold','calibri';
    text-transform: uppercase;
    /*text-shadow: 0 1px 1px rgba(0,0,0,0.2);*/


}


#t_sol h3 {
    font-size: 30px;
    font-family: 'sansationregular','calibri';
    padding: 10px;
    text-transform: uppercase;
    width: 30%;
    float: right;
    margin-top: 137px;
    /*text-shadow: 0 1px 1px rgba(0,0,0,0.2);*/

}

#t_sol p {
    clear: both;
    font-family: 'sansationregular','calibri';
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    font-size: 20px;
    width: 35%!important;
    text-align: justify;
    float: right;
    padding-right: 35px;
} 

#t_sol h4 {
    clear: both;
    float: right;
    width: 100%;
    text-align: right;
    margin-top: 20px;
    color: white;
    font-size: 30px;
    font-family: 'sansationregular','calibri';
    background: #f89600;
    vertical-align: middle;
    padding: 10px;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);

    margin-left: auto;
    margin-right: auto;
}


/*Tailored Solutions*/

/*eof Tailored Solutions*/
/*Slider*/
#slider {
    list-style-type: none;
}

#slider li {
    display: inline;
}

/*eof Slider*/
/*footer*/
#top {
    height: 250px;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    font-family: 'sansationregular';
}

#top a,#top a:after,#top a:visited {
    color: rgba(0,0,0,0.8);
    text-decoration: none;
}

#top a:hover {
    text-decoration: underline;
}

#top ul {
    padding-left: 15px;
    padding-top: 20px;
}

#top ul li {
    padding-left: 20px;
    line-height: 30px;
}

#top h3 {
    font-weight: 1000;
    padding-bottom: 10px;
    font-family: 'sansationbold';
    text-transform: uppercase;
}

#footoplist {
    height: 250px;
    width: 30%;
    float: left;
    margin-right: auto;
    margin-right: auto;
    /*padding-bottom: 30px;*/
    /*margin-bottom: 10px;*/
}

#break {
    height: 1px !important;
    width: 100%!important;
    background-color: rgba(255,255,255,0.5);
}
#bottom {

    clear: both;
    height: 110px !important;
    width: 80% !important;
    margin-right: auto;
    margin-left: auto;
    position: relative; 
    bottom: 0;
}

#bottom #txt {
    float: left;
    border-left: 1px solid rgba(255,255,255,0.5);
    padding: 10px 0 0 25px;
    color: white;
    font-family: 'sansationregular';
}

#bottom ul {
    height: auto;
    width: auto; 
    padding-bottom: 10px;
}

#bottom ul li {
    display: inline;
    padding-right: 10px;
    color: rgba(0,0,0,0.6);
}

#bottom img {
    width: 200px;
    height: auto;
    padding-top: 20px;
    float: left;
}

#bottom h4 {
    clear: both;
    color: rgba(0,0,0,1);
    padding-bottom: 10px;
}

#bottom a {
    text-decoration: none;
    color: rgba(0,0,0,0.8);
    font-family: 'sansationregular';
}

/*eof footer*/