讀大神的部落格後對於position:absolute，position:fixed的總結
阿新 • • 發佈：2019-01-05
1、沒有定義值得absolute和float一樣，是脫離文件流的
eg:
.image{position:absolute;width:50px;height:50px;} .box2{padding-left:60px;background: red;} .container3{overflow: hidden;zoom:1;} .image3{float:left;width:50px;height:50px;} .box3{background: red;padding-left:60px;}
<h1>絕對定位不設定定位值就和float元素一樣</h1> <divclass="container2"> <img src="" class="image" alt=""> <div class="box2">好好學習，天天向上，每天進步一點點</div> </div> <h1>使用float</h1> <div class="container3"> <img src="" class="image3" alt=""> <div class="box3">好好學習，天天向上，每天進步一點點</div> </div>
但是這裡有個問題，用absolute設定的時候臨近層不用padding，文字會直接覆蓋圖片但是float不會；
文件流是相對於盒子模型講的
文字流是相對於文子段落講的
這裡說明absolute脫離文件流也脫離了文字流後不佔位子其他元素會忽視他，float脫離文件流但是沒有脫離文字流，後面元素會忽視他的模組領域但是，其文字會圍繞到float元素周圍
2、對於未知寬高模組的垂直水平居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3445</title> <style> .box{background:red;width:50%;height:50%;position:absolute;top:0;bottom:0;
right:0;left:0;margin:auto;} </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body> </html>
這裡margin:auto表示平分width:50%;height:50%;剩下的剩餘空間，top:0;bottom:0;right:0;left:0;表示元素的padding content（這裡一下忘了大神咋寫的了，後面看到再補上）