css 中的 position 屬性用于定義元素在文檔流中的位置,可以取值為:static(默認):元素在文檔流中按正常順序排列。relative:將元素相對于其原位置移動一定距離,但仍保留在文檔流中。absolute:將元素從文檔流中移除,相對于其父級或根元素進行定位。fixed:將元素固定在瀏覽器視口中,即使滾動頁面也不會移動。
CSS 中 position 的用法
position 屬性定義元素在 HTML 文檔流和周圍元素中的位置。它可以指定元素是靜態的、相對的、絕對的還是固定的。
1. static(默認值)
靜態定位是默認定位,元素在文檔流中占據正常空間。
2. relative
相對定位將元素從其正常位置移動一段距離,但不會脫離文檔流。
3. absolute
絕對定位將元素從文檔流中移除并根據其父元素或根元素進行定位。
4. fixed
固定定位將元素固定在瀏覽器視口中,即使滾動頁面也不會移動。
使用方法
position 屬性的語法如下:
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">position: value;</code>
登錄后復制
其中,value 可以是以下值之一:
static
relative
absolute
fixed
示例
以下示例將 div 元素相對定位 10px 向右移動:
<code class="css">div { position: relative; right: 10px; }</code>
登錄后復制
以下示例將 div 元素絕對定位在頁面右下角:
<code class="css">div { position: absolute; bottom: 0; right: 0; }</code>
登錄后復制
注意:
只有具有定位屬性的元素才能設置 left、right、top 和 bottom 屬性。
相對定位的元素在文檔流中占據空間,而絕對定位的元素不占據。
固定定位的元素不會隨著頁面滾動而移動,但會影響其他元素的定位。