絕對定位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忘記容器並流出

回答

相關問題