css定位大彙總

1.1為什麼使用定位

利用定位，可以精準地將元素擺放到任何位置。擺放的位置可以相對於其父元素、另乙個元素或者是瀏覽器本身的位置。

1.2定位組成

定位：將盒子定在某乙個位置，所以定位也是在擺放盒子， 按照定位的方式移動盒子

定位也是用來布局的，它有兩部分組成：

定位 = 定位模式 + 邊偏移

1.2.1邊偏移

邊偏移就是定位的盒子移動到最終位置。有 top、bottom、left 和 right 4 個屬性。

邊偏移屬性

示例描述

toptop: 80px頂端偏移量，定義元素相對於其父元素上邊線的距離。

bottombottom: 80px底部偏移量，定義元素相對於其父元素下邊線的距離。

leftleft: 80px左側偏移量，定義元素相對於其父元素左邊線的距離。

rightright: 80px右側偏移量，定義元素相對於其父元素右邊線的距離

定位的盒子有了邊偏移才有價值。 一般情況下，凡是有定位地方必定有邊偏移。

1.2.2定位模式(position)

在 css 中，通過position屬性定義元素的定位模式，語法如下：

選擇器

定位模式決定元素的定位方式 ，它通過 css 的 position 屬性來設定，其值可以分為四個：值語義

static靜態定位

relative相對定位

absolute絕對定位

fixed固定定位

1.3定位模式介紹

1.3.1靜態定位(static)

1.3.2相對定位(relative)

選擇器

1.3.3絕對定位(absolute)

完全脫標—— 完全不佔位置；

父元素沒有定位，則以瀏覽器為準定位（document 文件）。

父元素要有定位

1.如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為基準定位（document 文件）。

2.如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。

3.絕對定位不再占有原先的位置。所以絕對定位是脫離標準流的。（脫標）

1.3.4固定定位(fixed)

2.固定定位不在占有原先的位置。

固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對定位。（認死理型）

1.3.5粘性定位(sticky)

1.以瀏覽器的可視視窗為參照點移動元素（固定定位特點）

2.粘性定位占有原先的位置（相對定位特點）

3.必須新增 top 、left、right、bottom其中乙個才有效

跟頁面滾動搭配使用。 相容性較差，ie 不支援。

1.3.6 定位總結

定位模式是否脫標移動位置是否常用

static 靜態定位

否不能使用邊偏移

很少relative 相對定位否 (占有位置)相對於自身位置移動基本單獨使用

absolute絕對定位是（不占有位置）帶有定位的父級要和定位父級元素搭配使用

fixed 固定定位是（不占有位置）瀏覽器可視區單獨使用，不需要父級

sticky 粘性定位

否 (占有位置)

瀏覽器可視區

較少

selenium之CSS定位彙總

初次玩微博，只為積累知識點。出自沒有島的島主的部落格 一 單一屬性定位 1 type selector driver.find element by css selector input 2 id 定位 driver.find element by css selector kw 3 class 定...

selenium之CSS定位彙總

定位輸入框 一 單一屬性定位 1 type selector driver.find element by css selector input 2 id 定位 driver.find element by css selector kw 3 class 定位 driver.find element...

css四大定位解析

元素的定位屬性主要包括定位模式和邊偏移兩部分。1 邊偏移 在css中，通過邊偏移屬性top bottom left right，來定義定位元素的位置，其取值為不同單位的數值或百分比。具體解釋如下表所示 邊偏移屬性 描述top 頂部偏移量，定義元素相對於其父元素上邊線的距離 bottom 底部偏移量，...