定位方向: left | right | top | bottom

position:static

靜態定位。默認值，就是文檔流

position:absolute

絕對定位 特點

• 元素使用絕對定位之後不占據原來的位置（脫標）
• 元素使用絕對定位，位置是從瀏覽器出發
• 嵌套的盒子，父盒子沒有使用定位，子盒子絕對定位，子盒子位置是從瀏覽器出發。
• 嵌套的盒子，父盒子使用定位，子盒子絕對定位，子盒子位置是從父元素位置出發
• 給行內元素使用絕對定位之後，轉換為行內塊。（不推薦使用，推薦使用display:inline-block;）

position: relative

相對定位 特點

• 使用相對定位，位置從自身出發
• 還占據原來的位置
• ==子絕父相（父元素相對定位，子元素絕對定位）==
• 行內元素使用相對定位不能轉行內塊

position:fixed

固定定位 特點

• 固定定位之後，不占據原來的位置（脫標）
• 元素使用固定定位之後，位置從瀏覽器出發
• 元素使用固定定位之後，會轉化為行內塊（不推薦，推薦使用display:inline-block;）

定位的盒子居中顯示

• margin:0 auto; 只能讓標準流的盒子居中對齊。
• 定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:負值。)

.nav{
    width:500px;
    height:60px;
    left:50%;
    margin-left:-480px
}
 

標簽包含規範

• div可以包含所有的標簽
• p標簽不能包含div h1等標簽
• h1可以包含p，div等標簽
• 行內元素盡量包含行內元素，行內元素不要包含塊元素

規避脫標流

• 盡量使用標準流
• 標準流解決不了的使用浮動
• 浮動解決不了的使用定位

CSS之定位