Vue進階（幺肆貳）：CSS-靜態(tài)定位，相對定位，絕對定位，固定定位的用法和區(qū)別詳解
CSS 提供了三種基本的定位機制：普通流、浮動和定位；通過這三種方式可實現(xiàn)頁面的排版布局。
普通流
普通流中元素的位置由元素在 (X)HTML 中的位置決定：
塊級元素獨自占一行，在文本流中從上到下一個接一個地排列；
行內元素在一行中并排排列，遇到父元素的邊沿會換行繼續(xù)排列；
浮動
浮動會讓元素脫離標準文檔流，不再占原來的空間，可以讓多個塊級元素并排顯示。
定位
定位是將元素定在某個位置，定位元素的層級要高于浮動元素；
通過定位可以讓元素相對于其正常位置進行偏移出現(xiàn)在別的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置；
定位可以將元素放置在頁面中的任何位置，這是標準文檔流和浮動無法實現(xiàn)的。
CSS 通過 position 屬性設置定位方式，其對應的屬性值如下：
絕對定位和固定定位會改變元素的 display 屬性，默認將元素轉為 行內塊元素。
static 靜態(tài)定位
按照標準文檔流的規(guī)則來放置元素，基本不用；
relative 相對定位
相對于自己在標準文檔流中的位置進行定位；原來的位置仍占有空間；
absolute 絕對定位
通過設置了定位的父級元素或祖先元素來進行定位：
如果父元素或祖先元素沒有定位則相對于頁面文檔進行定位；
絕對定位的元素脫離標準文檔流，不再占有原來的位置；
使用絕對定位的元素父元素一般設置為相對定位；
fixed 固定定位
相對于瀏覽器可視窗口進行定位，位置與父元素無關；
會將元素固定在窗口的某個位置不隨頁面的滾動而改變；
想實現(xiàn)元素的定位，只設置定位方式還是不夠的，需要結合 CSS 中的方位屬性來實現(xiàn)定位
屬性值可以是 px、cm、% 等；使用時一般是 水平方向的屬性（left、right）與垂直方向的屬性（top、bottom）結合使用；top 與 bottom 不要同時使用，left 與 right 不要同時使用。
相對定位示例：
/* 父元素 */ .parent { width: 400px; height: 400px; border: 1px solid gray; } /* 兩個子元素 */ .box1, .box2 { width: 200px; height: 200px; } .box1 { /* 設置相對定位 */ position: relative; /* 相對元素原來的位置距離上邊緣 50px */ top: 50px; /* 相對于原來的位置距左邊緣 100px */ left: 100px; background-color: green; } .box2 { background-color: blue; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
3
4
絕對定位示例：
/* 父元素 */ .parent { width: 400px; height: 400px; /* 父元素設置相對定位 */ position: relative; border: 1px solid gray; } /* 兩個子元素 */ .box1, .box2 { width: 200px; height: 200px; } .box1 { background-color: red; } .box2 { /* 設置絕對定位 */ position: absolute; /* 距離父元素上邊緣 50px */ top: 50px; /* 距離父元素左邊緣 100px */ left: 100px; background-color: purple; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
1
2
3
4
Biu~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~pia！
CSS Vue
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
