受絕對(duì)定位影響的一些 也許是“意想不到”的事情
css定位是css最重要的知識(shí)點(diǎn)之一，頁面布局很是仰仗它。然而最近在做一個(gè)小測(cè)試時(shí)發(fā)現(xiàn)了一些與“常識(shí)”和“直覺”不符的現(xiàn)象，把它寫出來，便于自己以后記憶。
首先回顧一下css的幾種定位方式，具體見下表：
| 值 | 屬性 |
|---|---|
| inherit | 規(guī)定應(yīng)該從父元素繼承 position 屬性的值 |
| static | 默認(rèn)值，沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |
| relative | 生成相對(duì)定位的元素，相對(duì)于元素本身正常位置進(jìn)行定位,因此，left:20px 會(huì)向元素的 left 位置添加20px |
| absolute | 生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）(的內(nèi)邊框)進(jìn)行定位,元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定 |
| fixed | 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定 |
| sticky | CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時(shí)，它的行為就像position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed，它會(huì)固定在目標(biāo)位置 |
1.絕對(duì)定位到底是相對(duì)于哪里定位的
從上表可以看出，絕對(duì)定位即postion:absolute相對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）(的內(nèi)邊框)進(jìn)行定位,元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定，當(dāng)其所有祖先元素都是static定位時(shí)，它就相對(duì)于根元素進(jìn)行定位。按照我們一般的想法，此時(shí)絕對(duì)定位的元素應(yīng)該也是相對(duì)于其根元素（即html元素）的內(nèi)邊框進(jìn)行定位的，但是事實(shí)缺不禁其然，事實(shí)上，它是相對(duì)于根元素的邊框最外圍進(jìn)行定位的。。。測(cè)試見下面的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>
2.子元素為絕對(duì)定位時(shí)候的寬度問題
我們經(jīng)常遇到需要把一個(gè)元素的寬度設(shè)置為100%的場(chǎng)景，一般情況下，該場(chǎng)景下此元素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>
但是，but......當(dāng)該元素為絕對(duì)定位時(shí)，會(huì)發(fā)生一些微妙的變化,比如
<!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>
與上面相比，只是把.box元素的定位方式設(shè)置成了絕對(duì)定位position: absolute;，元素的寬度立馬變寬了好多，所以可以看出此時(shí)子元素的寬度content其實(shí)是等于其父元素content+padding的寬度之和
此類好像與“直觀感受”不符的現(xiàn)象其實(shí)在css里面有很多，我也遇到過很多，不過暫時(shí)沒有總結(jié)過。以后再遇到這種問題時(shí)，不要過于糾結(jié)，瀏覽器顯示什么就是什么，把不常規(guī)的現(xiàn)象記下來，再次遇到時(shí)就能很快得到自己想要的效果
