position CSS定位屬性

2021-10-10 17:07:02 字數 2426 閱讀 9203

css position屬性用於指定乙個元素在文件中的定位方式。

要了解css定位,我們先了解一下定位元素和偏移量

計算後position屬性值為 relative, absolute, fixed 元素(換句話說,只要position的值不是static,該元素就是乙個定位元素)。

由於絕對定位和固定定位的元素會脫離文件流,所以我們需要通過偏移量來確定它的具體位置。

偏移量有四個屬性:left 、 right 、 top 、 button

這四個屬性每個方向選乙個屬性用來定位即可。

自動定位:元素根據常規文件流定位。此時偏移量 top, right, bottom, left 屬性無效。

相對定位:相對定位的元素是在文件中的正常位置偏移給定的值,但是不影響其他元素的偏移。(因此會在此元素未新增定位時所在位置留下空白)。

html

class

="box"

>

class

="txt1"

>

p>

class

="txt2"

>

p>

class

="txt3"

>

p>

class

="box2"

>

lorem ipsum dolor sit amet consectetur adipisicing elit. numquam accusantium hic ad ullam ut

incidunt ipsa!

cupiditate, recusandae consequuntur, impedit facere itaque vero aperiam fugit modi numquam optio dolore

quis.

div>

div>

css.box

p.txt2

.box2

效果:

絕對定位:絕對定位的元素則脫離了文件流。在布置文件流中其它元素時,絕對定位元素不佔據空間。絕對定位元素會相對於最近的祖先級定位元素進行定位。如果不存在這樣的元素,則相對於body進行定位

在使用時,如果其父元素不是定位元素,我們一般會給其父元素相對定位以方便布局(子絕父相

html

class

="box"

>

class

="txt1"

>

p>

class

="txt2"

>

p>

class

="txt3"

>

p>

class

="box2"

>

lorem ipsum dolor sit amet consectetur adipisicing elit. numquam accusantium hic ad ullam ut

incidunt ipsa!

cupiditate, recusandae consequuntur, impedit facere itaque vero aperiam fugit modi numquam optio dolore

quis.

div>

div>

css.box

p.txt2

.box2

效果

固定定位:固定定位與絕對定位相似(會脫離文件流),但元素的包含塊為 viewport 視口(相對於可視視窗進行定位)。該定位方式常用於建立在滾動螢幕時仍固定在相同位置的元素。

html

> p

>

class

="box"

>

我是固定定位元素

定位屬性position,相對定位,絕對定位

在css中關於定位的內容是 position relative absolute static fixed static 自動定位,自動定位就是元素在頁面普通文件流中由html自動定位,普通文件裡中的元素也稱為流動元素。不能通過z index進行層次分級。relative 相對定位,相對定位不脫離文...

position定位屬性

position定位屬性設定值 absolute 絕對定位 脫離原普通流 依據父級 祖先級元素的位置進行定位 如果沒有父級元素,則參照body進行定位 relative 相對定位 相對於原位置的定位,仍然佔據原先普通流的位置 static 元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,...

CSS定位屬性

position 把元素放置到乙個靜態的 相對的 絕對的 或固定的位置中。top定義了乙個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。left 定義了定位元素左...