受絕對定位影響的一些 也許是“意想不到”的事情
css定位是css最重要的知識點之一，頁面布局很是仰仗它。然而最近在做一個小測試時發現了一些與“常識”和“直覺”不符的現象，把它寫出來，便于自己以后記憶。
首先回顧一下css的幾種定位方式，具體見下表：
| 值 | 屬性 |
|---|---|
| inherit | 規定應該從父元素繼承 position 屬性的值 |
| static | 默認值，沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |
| relative | 生成相對定位的元素，相對于元素本身正常位置進行定位,因此，left:20px 會向元素的 left 位置添加20px |
| absolute | 生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）(的內邊框)進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規定 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規定 |
| sticky | CSS3新屬性，表現類似position:relative和position:fixed的合體，在目標區域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置 |
1.絕對定位到底是相對于哪里定位的
從上表可以看出，絕對定位即postion:absolute相對于static定位以外的第一個祖先元素（offset parent）(的內邊框)進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規定，當其所有祖先元素都是static定位時，它就相對于根元素進行定位。按照我們一般的想法，此時絕對定位的元素應該也是相對于其根元素（即html元素）的內邊框進行定位的，但是事實缺不禁其然，事實上，它是相對于根元素的邊框最外圍進行定位的。。。測試見下面的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html{
border: 30px solid yellow;
height: 500px;
width: 600px;
}
.box{
border: 3px solid ;
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0;
}
.ct{
margin-top: 100px;
border: 20px solid red;
height: 300px;
position: relative;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="ct">
<div class="box"></div>
</div>
</body>
</html>
b1-1.PNG
2.子元素為絕對定位時候的寬度問題
我們經常遇到需要把一個元素的寬度設置為100%的場景，一般情況下，該場景下此元素content的寬度等于其父元素content的寬度，比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct{
width: 200px;
border: 20px solid red;
height: 300px;
position: relative;
padding: 20px;
}
.box{
border: 20px solid ;
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box"></div>
</div>
</body>
</html>
b1-2.PNG
但是，but......當該元素為絕對定位時，會發生一些微妙的變化,比如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct{
width: 200px;
border: 20px solid red;
height: 300px;
position: relative;
padding: 20px;
position: relative;
}
.box{
border: 20px solid ;
width: 100%;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<div class="ct">
<div class="box"></div>
</div>
</body>
</html>
b1-3.PNG
與上面相比，只是把.box元素的定位方式設置成了絕對定位position: absolute;，元素的寬度立馬變寬了好多，所以可以看出此時子元素的寬度content其實是等于其父元素content+padding的寬度之和
此類好像與“直觀感受”不符的現象其實在css里面有很多，我也遇到過很多，不過暫時沒有總結過。以后再遇到這種問題時，不要過于糾結，瀏覽器顯示什么就是什么，把不常規的現象記下來，再次遇到時就能很快得到自己想要的效果
