CSS定位使用方法
阿新 • • 發佈：2017-10-16
網頁 abs 好用 absolut position 並不會 區域 css 元素
對於網頁頁面布局來說，使用定位可以簡單粗暴地將各塊區域布置好，並且實現多種特效。
絕對定位：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box0{ width: 200px; height: 200px; position: relative;background: #cfa } .box0-1,.box0-2{ width: 50px; height: 50px; } .box0-1{ position:absolute; left: 50px; top: 50px; background: #567 } .box0-2{ position:absolute; left: 50px; top: 50px; background: #5a2} </style> </head> <body> <div class="box0"> <div class="box0-1">0-1</div> <div class="box0-2">0-2</div> </div> </body> </html>
結果如下：
0-1 0-2需要註意的是，使用絕對定位調整元素在父級元素區域位置時，父級元素必須為非靜態定位，否則子元素會往上級找到非靜態的祖先元素，再依據其位置進行定位。
如果不適用定位，要實現這樣的效果，需要使用CSS屬性為：
.box0{ width: 200px; height: 200px;background: #cfa; overflow: hidden } .box0-1,.box0-2{ width: 50px; height: 50px; } .box0-1{ margin: 50px 0 0 50px; } .box0-2{ margin: 0 50px 0 100px; }
使用邊距和浮動是一個計算的過程，需要把握好每一個像素之間的關系。而使用絕對定位就是單純的找位置，只要量得住，那就找的準，直接粗暴。需要註意的是，絕對定位的元素脫離了標準文檔流，其本身的位置並不會保留，所以不能和浮動同時使用。並且也不建議和margin一起使用。
對於相對定位來說，由於元素本身的位置並不會消失，所以配合浮動更加好用，否則使用絕對定位更方便。
如下（便於觀察，兩個小塊設置100的上外邊距，此時原本位置應從下方3/4開始）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ width: 200px; height: 200px; background: #abc } .box1-1,.box1-2{ width: 50px; height: 50px; margin-top: 100px; float: left; position: relative; } .box1-1{ top: 50px; left: 50px; background: #a2c; } .box1-2{ bottom: 50px; right: 50px; background: #22c; } </style> </head> <body> <div class="box1"> <div class="box1-1">1-1</div> <div class="box1-2">1-2</div> </div> </body> </html>
結果如下：
1-1 1-2相對定位的相對，就是指沒有設置定位值，元素所在的位置，根據代碼順序，後者會對前者內容進行覆蓋。
絕對定位就是牛皮蘚，固定在顯示區域的位置，此時固定是針對顯示區域而言，對於絕對定位，也不能和浮動使用，同樣不建議與margin使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box2{ width: 200px; height: 200px; background: #ca9 } .box2-1{ width: 50px; height: 50px; position: fixed; } .box2-1{ top: 50px; left: 50px; background: #4b3; } </style> </head> <body> <div class="box2"> <div class="box2-1">我被固定了</div> </div> </body> </html>
結果自己找吧：
結果不是根據父級元素定位的，顯示不出（和上一篇的旋轉一樣）暫時不知道為什麽。
總之，不同的定位方式有不同的作用，使用定位的目的是讓代碼簡潔直觀，所以具體使用哪一種應當根據實際情況而定。
CSS定位使用方法