CSS 深入理解absolute
阿新 • • 發佈：2019-02-16
absolute：絕對定位。越獨立越強大，無依賴性。不受容器的限制。
獨立的absolute可以擺脫overflow的限制，無論是滾動還是隱藏。
absolute與float不能一起使用，如果absolute生效，則float是無效的。
絕對定位可以配合margin實現相對定位。
動畫儘量作用在絕對定位元素上。
與fixed，relative一樣，absolute設計的初衷確實是定位。
但與fixed，relative不同的是absolute包含更多特有且強大的特性。
使用absolute實現網頁整體佈局會有很多優點。
例如：相容性好，自適應強，效能優異，擴充套件方便，可以實現諸多效果等等。
z-index無依賴
1.如果只有一個絕對定位元素，自然不需要z-index,自動覆蓋普通元素；
2.如果兩個絕對定位，控制DOM流的前後順序達到需要的覆蓋效果，依然無z-index；
3.如果多個絕對定位交錯，非常非常少見，z-index:1控制；
4.如果非彈窗類的絕對定位元素z-index>2,必定z-index冗餘，請優化！
absolute與整體佈局
1. body降級, 子元素升級
升級的子div(假設類名為page)滿屏走起：
.page { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
絕對定位受限於父級，因此，page要想愉快地拉伸，需要：
html, body { height: 100%; }
2. 各模組-頭尾、側邊欄(PC端)各居其位
header, footer { position: absolute; left: 0; right: 0; }
header { height: 48px; top: 0; }
footer { height: 52px; bottom: 0; }
aside {
width: 250px;
position: absolute; left: 0; top: 0; bottom: 0
}
3. 內容區域想象成body
. content {
position: absolute;
top: 48px; bottom: 52px;
left: 250px(如果側邊欄有);
overflow: auto; //這裡的overflow: auto是為了讓中間內容區超過寬度後可以滾動
}
此時的頭部尾部以及側邊欄都是fixed效果，不跟隨滾動。避免了移動端position: fixed實現的諸多問題。
4. 全屏覆蓋與page平級
. overlay {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: rgba(0,0,0,.5);
z-index: 9;
}
<div class= " page " ></div>
<div class= " overlay "></div>
absolute 的破環性：
<span style="font-size:18px;"><span style="font-size:18px;"><!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>absolute的破壞性</title> <style> .box { padding: 10px; background-color: #f0f0f0; } input { position: absolute; top: 234px; width: 160px; height: 32px; font-size: 100%; } </style> </head> <body> <div class="box"><img id="image" src="1.jpg" width="256" height="191"></div> <input id="button" type="button" value="圖片absolute化"> <script> var eleImg = document.getElementById("image"), eleBtn = document.getElementById("button"); if (eleImg != null && eleBtn != null) { eleBtn.onclick = function() { if (this.absolute) { eleImg.style.position = ""; this.value = "圖片absolute化"; this.absolute = false; } else { eleImg.style.position = "absolute"; this.value = "圖片去absolute"; this.absolute = true; } }; } </script> </body> </html></span></span>
absolute的包裹性：
<span style="font-size:18px;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>absolute的包裹性</title>
<style>
.box {
padding: 10px;
background-color: #f0f0f0;
}
input {
position: absolute; top: 234px;
width: 160px; height: 32px;
font-size: 100%;
}
</style>
</head>
<body>
<div id="box" class="box"><img src="2.jpg" width="256" height="191"></div>
<input id="button" type="button" value="容器absolute化">
<script>
var eleBox = document.getElementById("box"), eleBtn = document.getElementById("button");
if (eleBox != null && eleBtn != null) {
eleBtn.onclick = function() {
if (this.absolute) {
eleBox.style.position = "";
this.value = "容器absolute化";
this.absolute = false;
} else {
eleBox.style.position = "absolute";
this.value = "容器去absolute";
this.absolute = true;
}
};
}
</script>
</body>
</html></span>