CSS position 屬性
1.static（靜態(tài)）
????描述：元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。
2.relative（相對(duì)）
????描述：元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
實(shí)例：
```
<!DOCTYPE html>
<html lang="en">
? ? <meta charset="UTF-8">
? ? <title>Title
? ? ? ? div{
margin:2px;
? ? ? ? ? ? width:200px;
? ? ? ? ? ? height:200px;
? ? ? ? ? ? background-color:blue;
? ? ? ? }
#a{
background-color:red;
? ? ? ? ? ? position:relative;
? ? ? ? ? ? left:350px;
? ? ? ? ? ? top:50px;
? ? ? ? }
#b{
position:relative;
? ? ? ? ? ? bottom:40px;
? ? ? ? }
<div id="a">xiao
<div id="b">cctv
</html>
```
運(yùn)行結(jié)果：
3.absolute（絕對(duì)）
????描述：元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類型的框。
實(shí)例：
```
<!DOCTYPE html>
<html lang="en">
? ? <meta charset="UTF-8">
? ? <title>Title
? ? ? ? #a{
margin:20px;
? ? ? ? ? ? position:relative;
? ? ? ? ? ? background-color:red;
? ? ? ? ? ? width:300px;
? ? ? ? ? ? height:300px;
? ? ? ? }
#b{
position:absolute;
? ? ? ? ? ? background-color:blue;
? ? ? ? ? ? width:200px;
? ? ? ? ? ? height:200px;
? ? ? ? ? ? top:10px;
? ? ? ? ? ? left:10px;
? ? ? ? }
#c{
position:absolute;
? ? ? ? ? ? top:10px;
? ? ? ? ? ? background-color:yellow;
? ? ? ? ? ? width:100px;
? ? ? ? ? ? height:100px;
? ? ? ? }
<div id="a">
? ? <div id="b">
? ? <div id="c">
</html>
```
運(yùn)行結(jié)果：
4.fixed（固定）
????簡(jiǎn)述：元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。
實(shí)例：
```
<!DOCTYPE html>
<html lang="en">
? ? <meta charset="UTF-8">
? ? <title>Title
? ? ? ? #a{
position:relative;
? ? ? ? ? ? background-color:red;
? ? ? ? ? ? width:800px;
? ? ? ? ? ? height:800px;
? ? ? ? }
#b{
position:fixed;
? ? ? ? ? ? background-color:blue;
? ? ? ? ? ? width:100%;
? ? ? ? ? ? height:100px;
? ? ? ? }
<div id="a">
? ? <div id="b">
</html>
```
運(yùn)行結(jié)果：
