定位流之子絕父相

定位流：position

分類：1.相對定位：（relative）不脫離標準流，還會佔空間配合，相對在標準流的位置運動（top，right同乙個方向上只用乙個屬性等使(相對以前在標準流的位置來移動)（在相對定位中用margin和padding屬性會影響整個網頁布局）

應用場景：（1）用於對元素微調（2）配合絕對定位使用

2.絕對定位：（absolute）脫離標準流，預設相對於body中的位置運動，在標準流裡行內和塊級元素是會被區分的行內不能設定寬高，但在脫離標準流後就可以設定了，如定位流和浮動流；看把（absolute放在哪）如果放在你需要移動的盒子裡那就直接相對body運動，如果放在它的父盒子裡那就相對父盒子運動。放在它爺盒子裡就相對爺盒子裡；如果自己，父盒子，爺盒子都有絕對定位，則以最近的盒子做參考點（父盒子，爺盒子）（只有靜態定位不滿足）

重要注意：這裡的body是指開啟瀏覽器網頁的那個視窗大小，用絕對定位盒子在左下角只是在視窗的最下角，不是真正的body,絕對定位會忽略父元素的padding 水平居中：（margin：0 auto；不適用於絕對定位）用百分比距離盒子的哪邊永遠是多少距離不會隨著寬高而變化，永遠距離整個寬度的百分之幾

實現水平居中**：left：50%；margin-left:-150px(這個長度是盒子本身長度的一般)容易理解

3.靜態定位:預設情況在標準流中就是靜態定位

1
doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>定位流
title
>
6<
style
>7*
11div
15.box1
20.box2
26.box3
29style
>
30head
>
31<
body
>
32<
div 
class
="box1"
>
div>
33<
div 
class
="box2"
>
div>
34<
div 
class
="box3"
>
div>
35body
>
36html
>

1
doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>子絕父相
title
>
6<
style
>7ul
16li
22.quan
26img
37style
>
38head
>
39<
body
>
4041
<
ul>
42<
li>服裝
li>
43<
li>美妝
li>
44<
li>京東超市
li>
45<
li class
="quan"
>
46全球購
47<
img 
src=""
width
="40px"
>
li>
48<
li>閃購
li>
49<
li>拍賣
li>
50ul
>
51body
>
52html
>

定位流之子絕父相

css定位，相對定位，絕對定位，子絕父相

HTML中定位及子絕父相的理解

CSS之定位模式介紹（重要）子絕父相

定位流之子絕父相

css定位，相對定位，絕對定位，子絕父相

HTML中定位及子絕父相的理解

CSS之定位模式介紹（重要） 子絕父相

相關推薦

CSS之定位模式介紹（重要）子絕父相