css中position定位屬性詳解

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

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

1、cssposition屬性

css中position定位屬性詳解

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

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

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

2、定位方式

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

3、利用 position 定位元素

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

代碼示例

{

position:absolute;

left:100px;

top:150px;

}

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

在對元素使用 z-index 屬性定位時，需要注意以下幾點：

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

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