https://www.xiaobuteach.com/html/div-layout/position.html?from=bili

CSS 定位 position

1 什么是定位

1）直角坐標(biāo)系模型

數(shù)學(xué)直角坐標(biāo)系是二維平面，點(diǎn)定位是通過橫坐標(biāo)x與縱坐標(biāo)y。

兩個(gè)要素：

要素1：定位基準(zhǔn)，即原點(diǎn)；

要素2：偏量量，橫坐標(biāo)與縱坐標(biāo)兩個(gè)方向的移偏量(x，y)。

2）HTML定位坐標(biāo)模型

因?yàn)?strong>一切HTML元素都是盒子，點(diǎn)對(duì)點(diǎn)的偏移變成了矩形對(duì)矩形的偏移。

HTML頁(yè)面里，元素的定位與直角坐標(biāo)系定位的不同點(diǎn)：

基準(zhǔn)從原點(diǎn)一個(gè)點(diǎn)變成一個(gè)矩形（另一個(gè)元素的盒子）；

偏移量在水平方向可通過left與right進(jìn)行坐標(biāo)設(shè)置，垂直方向可通過top與bottom設(shè)置。

上圖中，當(dāng)前兩個(gè)HTML元素：外層HTML元素顯示為藍(lán)盒、內(nèi)層HTML元素為紅盒；

當(dāng)以藍(lán)盒為基準(zhǔn)（原點(diǎn)），描述紅盒的坐標(biāo)：

1）水平方向坐標(biāo)：可通過left或right（選其中一個(gè)）指定

2）垂直方向定位：可通過top或bottom（選其中一個(gè)）指定

注：紅色盒子不一定在藍(lán)色盒子的內(nèi)部，可以是任意位置。為暫時(shí)直觀理解，畫在完全的內(nèi)部。

3）定位基準(zhǔn)

紅盒填寫left與top后，是相對(duì)于哪個(gè)藍(lán)盒呢？也就是定位基準(zhǔn)是誰？我們?nèi)绾卧O(shè)置？

問題：CSS定位并不能指定任意一個(gè)其它元素作為自己的定位基準(zhǔn)，CSS規(guī)范主要提供了4種基準(zhǔn)方式，即position屬性的不同值，可根據(jù)需求進(jìn)行設(shè)置，position屬性值設(shè)置不同的值，表示不同的定位基準(zhǔn)，也就是相對(duì)于誰。

后續(xù)進(jìn)一步介紹position屬性值。

藍(lán)盒的定位基準(zhǔn)又是誰呢？

最終一層一層往上找，最頂層的基準(zhǔn)是頁(yè)面窗口。

4）定位的嵌套

上圖所示，紫盒代表頁(yè)面窗口；

紫盒是橙盒的定位基準(zhǔn)（即：橙盒相對(duì)于紫盒定位）；

藍(lán)盒相對(duì)于橙盒定位；

紅盒相對(duì)于藍(lán)盒進(jìn)行定位。

2 定位的學(xué)習(xí)難點(diǎn)

一個(gè)元素的最終定位，不能只看它本身的定位（position）屬性值與偏移量（left/right/top/bottom），還要看它相對(duì)誰（基準(zhǔn)元素），這個(gè)誰的position屬性值與篇移量，繼續(xù)套娃…

至少要看內(nèi)外兩個(gè)元素的定位。

3 定位簡(jiǎn)單示例

例1：無偏移的兩個(gè)div。

div1的position（定位）屬性值是relative；

子元素div2的position屬性值是absolute。

暫不說這兩個(gè)值的意思，容易被它的字面意思誤導(dǎo)，具體含義后續(xù)介紹，先體驗(yàn)坐標(biāo)值的設(shè)置。

? ?<div id="div1" style=" position: relative; ?;;border:2px solid #00f;width:300px;height: 300px;"> ? ? ? ?<div id="div2" style="position:absolute; ?;;border: 2px solid #f00;width: 100px;height: 100px;"></div> ? ?</div>

當(dāng)沒有設(shè)置left/right、top/bottom，相對(duì)于left=0與top=0。

例2：水平方向通過left、垂直方向通過top定位。

在例1基礎(chǔ)上設(shè)置div2的left與top。

? ?<div id="div1" style=" position: relative; ?;;border:2px solid #00f;width:300px;height: 300px;"> ? ? ? ?<div id="div2" style="position:absolute;left:30px;top:60px; ?;;border: 2px solid #f00;width: 100px;height: 100px;"></div> ? ?</div>

例3：通過right與bottom定位。

? ?<div id="div1" style=" position: relative; ?;;border:2px solid #00f;width:300px;height: 300px;"> ? ? ? ?<div id="div2" style="position:absolute;right:5px;bottom:5px; ?;;border: 2px solid #f00;width: 100px;height: 100px;"></div> ? ?</div>

例4：其它

也可以設(shè)置top+bottom、right+top；

或者只設(shè)其中一個(gè)方向，例如只設(shè)left/right，則top=0；

或只設(shè)top/bottom,則left=0。

小結(jié)

上述各例，紅盒以藍(lán)盒為基準(zhǔn)，即：紅盒相對(duì)于藍(lán)盒，設(shè)置偏移量（坐標(biāo)）。

4 position常用屬性

HTML里的兩個(gè)一切：

1）一切HTML元素都是盒子；

2）一切定位都是相對(duì)的，無論什么名稱的定位。

說明

相對(duì)于誰定位：就是設(shè)置偏移量屬性(left/top/right/bottom)的基準(zhǔn)元素是誰。

position屬性值說明static"靜態(tài)定位"。默認(rèn)值。不相對(duì)于誰，元素在頁(yè)面進(jìn)行流式顯示。設(shè)置偏移量無效。relative"相對(duì)定位"。相對(duì)于自身進(jìn)行定位。absolute"絕對(duì)定位"。相對(duì)于非static的父容器進(jìn)行定位。fixed"固定定位"。相對(duì)于瀏覽器窗口進(jìn)行定位。

各屬性值詳情請(qǐng)見下節(jié)。

?上一節(jié)??CSS div布局 商品列表? ? ? ?下一節(jié)??CSS position static定位?