css中position定位屬性詳解

閱讀量： 9 發(fā)布日期： 2022-11-04 09:05:33

CSS position屬性允許你將元素定位在頁面上的任意位置。

1、cssposition屬性

css中position定位屬性詳解

CSS 中的 position 屬性是定位元素的屬性，元素的位置可以通過 left、right、top、bottom 四個(gè)屬性來設(shè)置。默認(rèn)情況下，元素的位置是根據(jù)文檔流定位的，但是有時(shí)候我們需要對(duì)元素進(jìn)行定位，使其不隨文檔流變化而變化。定位方式分為兩種：

1. 絕對(duì)定位（absolute positioning）：元素的位置相對(duì)于包含它的第一個(gè)祖先元素（不是文檔流中的祖先元素）定位，如果沒有祖先元素，則相對(duì)于最近的包含它的元素。

2. 相對(duì)定位（relative positioning）：元素的位置相對(duì)于它在文檔流中的原始位置定位。定位元素是使用 position 屬性來設(shè)置的，該屬性可以設(shè)置為以下值：static：默認(rèn)值，元素按照正常文檔流進(jìn)行排列。relative：元素的位置相對(duì)于它在文檔流中的原始位置定位。

2、定位方式

CSS 中的 position 屬性允許您將元素放置在文檔中的任何位置。這對(duì)于創(chuàng)建高級(jí)布局非常有用，有時(shí)您可能想要精確定位元素，而不考慮文檔流。position 屬性有四個(gè)可能的值：static：默認(rèn)值。元素按照正常的流進(jìn)行排列。relative：元素相對(duì)于其正常位置進(jìn)行定位。absolute：元素絕對(duì)定位，相對(duì)于最近的已定位祖先元素。如果元素沒有已定位的祖先元素，則相對(duì)于文檔的根元素進(jìn)行定位。fixed：元素絕對(duì)定位，相對(duì)于瀏覽器窗口進(jìn)行定位。注意：absolute 和 fixed 定位的元素可能會(huì)導(dǎo)致文檔的布局發(fā)生改變。

3、利用 position 定位元素

使用 position 定位的元素，通常我們將它稱為“定位元素”。定位元素的位置通過“l(fā)eft”、“top”、“right”、“bottom”四個(gè)屬性來設(shè)置。如果不設(shè)置這四個(gè)屬性，定位元素就是普通元素，它會(huì)出現(xiàn)在文檔流中，就像普通元素一樣。

代碼示例

{

position:absolute;

left:100px;

top:150px;

}

4、使用 z-index 與 position 完成多重定位

在對(duì)元素使用 z-index 屬性定位時(shí)，需要注意以下幾點(diǎn)：

1、z-index 值只有在定位元素上才會(huì)生效。

2、z-index 值只對(duì)同一級(jí)別或更高級(jí)別的定位元素起作用。

3、默認(rèn)情況下，所有非定位元素的 z-index 都是 0，定位元素默認(rèn)為 1。

4、如果兩個(gè)相同級(jí)別的定位元素 z-index 值一樣，后來出現(xiàn)的元素會(huì)覆蓋前面的元素。