12 1 定位 相對，絕對，固定

一 相對定位

如果僅僅對當前盒子設定相對定位，那麼它與原來的盒子沒有任何變化、

只有乙個作用：父相子絕
不要使用相對定位來做壓蓋現象
二種現象：
1.不脫標
2.形影分離
例項：

12"

en">
32526
class="
box1
">
27class="
box2
">
28class="
box3
">
2930

二 絕對定位

現象：

1.設定絕對定位的盒子，脫離標準流
參考點：
一、單獨乙個絕對定位的盒子
1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）為參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角為參考點來調整位置。（愛立信）
二、以父輩盒子作為參考點
1.父輩元素設定相對定位，子元素設定絕對定位，那麼會以父輩元素左上角為參考點，這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。
2.如果父親設定了定位，那麼以父親為參考點。那麼如果父親沒有設定定位，那麼以父輩元素設定定位的為參考點
3.不僅僅是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素為參考點
注意了：父絕子絕，沒有實戰意義，做站的時候不會出現父絕子絕。因為絕對定位脫離標準流，
影響頁面的布局。相反『父相子絕』在我們頁面布局中，是常用的布局方案。因為父親設定相對定位，
不脫離標準流，子元素設定絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。
還要注意，絕對定位的盒子無視父輩的padding
設定絕對定位之後，margin:0 auto;不起任何作用，如果想讓絕對定位的盒子居中。
當做公式記下來 設定子元素絕對定位，然後left:50%; margin-left等於元素寬度的一半，
實現絕對定位盒子居中
例項：

12"

en">
345"
height: 2000px
">
46class="
father
">
47class="
father2
">
48class="
box1
">
4950
5152
5354
5556

三 固定定位

固定當前的元素不會隨著頁面滾動而滾動

特性: 

1.脫標 2.遮蓋，提公升層級 3.固定不變

設定固定定位，用top描述。那麼是以瀏覽器的左上角為參考點

如果用bottom描述，那麼是以瀏覽器的左下角為參考點

作用： 1.返回頂部欄 2.固定導航欄 3.小廣告

例項：做了乙個固定導航欄

12"

en">
34849
class="
head
">
50導航欄
5152
class="
">
53中心內容54"
position: absolute; color: black;background-color: white;
">
5556"#
">
57class="
top">
58返回頂部
5960
6164
6578
79

四 父相子絕案例

12"

en">
36263
class="
search
">
6470
7172
73

五 z-index

例項：z-index優先順序判斷

12"

en">
33233
class="
box">
34class="
box1
">
3536
37

例項2 從父現象

12"

en">
33637
class="
father1
">
38class="
box">
3940
4142
4344
class="
father2
">
45class="
box2
">
4647
4849
5051

絕對定位，相對定位，固定定位

通過position屬性來設定元素的定位 static 預設值，元素沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位 也是絕對定位的一種 說明 當開啟了元素的相對定位以後，而不設定偏移量時，元素不會發生任何變化 相對定位是相對於...

絕對定位 相對定位 固定定位的區別

絕對定位 position absolute 特點 元素使用絕對定位之後不佔據原來的位置 脫標 元素使用絕對定位，位置是從瀏覽器出發。巢狀的盒子，父盒子沒有使用定位，子盒子絕對定位，子盒子位置是從瀏覽器出 發。巢狀的盒子，父盒子使用定位，子盒子絕對定位，子盒子位置是從父元素位置出 發。給行內元素使用...

定位 絕對定位 相對定位

定位是一種高階的布局手段 通過定位可以將元素擺放到頁面的任意位置 使用position屬性來設定定位當元素開啟了定位以後，可以通過偏移量來設定元素的位置 例如 top 100px bottom xxpx left right 注意 relative相對定位的參照元素是其本身在文件流中的位置進行定位 ...