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

我有一个容器被设置为float:none和margin:0 auto;和width:80%;但是，绝对定位在容器内的一个div流出容器。绝对定位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。

由于提前

来源

2014-09-26 CodeName44

绝对定位元素超出正常文档流程，这就是为什么... – qtgye 2014-09-26 08:50:40

绝对定位流出，因为它定位到下一个相对元素。这是主要的容器 – 2014-09-26 08:51:15

Define .container {position：relative;} – 2014-09-26 08:51:23

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

必须定义父相结合绝对子

DEMO

来源

2014-09-26 08:52:11 himanshu

@ CodeName44如果答案是正确的，请接受它，这样可以帮助其他人 – himanshu 2014-09-26 09:16:05

请检查[小提琴]（http：// jsfiddle .net /＃＆togetherjs = VptJurBM6I） – CodeName44 2014-09-26 09:56:12

你必须给容器高度 – himanshu 2014-09-26 10:18:20

当定位的元件（相对的，固定的或绝对的）其参考是第一定位父元素。所以，你需要告诉它必须放置在容器后的元素：

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

小心混合花车和定位的元素，使用适当的clearfix因此容器的尺寸是准确的。

来源

2014-09-26 10:38:28 iovis

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

回答

相关问题