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

你必须定义父相对于绑定绝对子

DEMO

Answer 2

当您定位元素（相对，固定或绝对）时，其引用是第一个定位的父元素。所以你需要告诉元素它必须放在容器之后：

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

小心混合浮子和定位元素，使用正确的clearfix，使容器尺寸准确。

绝对定位的div会忘记容器并流出

2 个答案: