css中的絕對定位

今天來講css中絕對定位：

絕對定位是元素在移動位置的時候，是相對於它祖先元素來說的

1. 情況一：沒有父盒子，即父盒子就是瀏覽器

html**如下：

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document
"stylesheet" href=
"absolute.css"
>
<
!-- 情況一：沒有父盒子，即父盒子就是瀏覽器 -->
"alone"
>

/* 清除瀏覽器的內外邊距 */

* /* <
!-- 情況一：沒有父盒子，即父盒子就是瀏覽器 --> */
.alone 

2. 情況二:有父盒子但是父盒子沒有定位

html**如下：

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document
"stylesheet" href=
"absolute.css"
>
<
!-- 情況二:有父盒子但是父盒子沒有定位 -->
"father"
>
"son"
>

/* 清除瀏覽器的內外邊距 */

* /* 情況二：有父盒子但是父盒子沒有定位 */
3.情況三：有父盒子並且父盒子有定位（無論是相對定位還是絕對定位還是固定定位）html**如下：
<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document
"stylesheet" href=
"absolute.css"
>
<
!-- 情況三：有父盒子並且父盒子有定位（無論是相對定位還是絕對定位還是固定定位） -->
"father"
>
"son"
>
css（absolute.css）**如下：

/* 清除瀏覽器的內外邊距 */

* /* <
!-- 情況三：有父盒子並且父盒子有定位（無論是相對定位還是絕對定位還是固定定位） --> */
.father 
.son 
執行結果如下：

4.情況四：有父盒子但是父盒子沒有定位而爺爺盒子有定位，則在爺爺盒子的範圍內定位
html**如下：
<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document
"stylesheet" href=
"absolute.css"
>
<
!-- 情況四：有父盒子但是父盒子沒有定位而爺爺盒子有定位，則在爺爺盒子的範圍內定位 -->
"grandfather"
>
"father"
>
"son"
>
css（absolute.css）**如下：

/* 清除瀏覽器的內外邊距 */

* .grandfather 
/* 爸爸無定位 */
.father 
/* 那此時孫子就向爺爺看齊 */
.son 
執行結果如下:

這只是例子，從中我們可以總結，父級有定位，則看父級，父級沒有定位，則繼續向上找父級，實在找不到的話，就瀏覽器對齊啦，瀏覽器是默默愛你的哈哈
 
CSS中的絕對定位
css 中的絕對定位 左直拳我發現，css中的絕對定位並不如印象中的那樣，一定要給 left 和top 乙個具體特定的數值，如 divid divclosestool style position absolute left 100px top 100px background color red ...
CSS中的絕對定位
css中的絕對定位 左直拳我發現，css中的絕對定位並不如印象中的那樣，一定要給left和top乙個具體特定的數值，如 divid divclosestool style position absolute left 100px top 100px background color red font...
CSS中的絕對定位
css中的絕對定位 左直拳我發現，css中的絕對定位並不如印象中的那樣，一定要給left和top乙個具體特定的數值，如 divid divclosestool style position absolute left 100px top 100px background color red font...