jquery - 绝对定位的div忘记容器而流出

Question

我有一个容器设置为 float:none 和 margin:0 auto; 和 width:80%; 但其中之一绝对定位在容器内的div流出容器。

代码是

    <main>
       <div class="container">
          <div class="main_top"></div>
          <div class="main_bottom"></div>
       </div>
    </main>

CSS 是

    .container {
        float: none;
        width: 80%;
        margin: 0 auto;
       }
    main { 
       float:left; 
       position:relative;
      }
    .main_top {
       float: left;
       width: 100%;
     }
    .main-bottom {
       position:absolute;
       width:100%;
     }

现在 .main-bottom 流出 .container 宽度。由于这是一个响应式网站，没有它就不可能实现响应。请帮忙。

请检查Fiddle了解更多详情。

提前致谢

Answer 1

.container{
position:releative;
width: 80%;
margin: 0 auto;}

你必须定义父相对绑定(bind)绝对子

DEMO