久久久久亚洲国产av麻豆,国产色哟哟一二三区,成人a毛片

零基礎(chǔ)網(wǎng)頁開發(fā)8??（CSS的position語法）

當(dāng)前位置：點晴教程→知識管理交流 →『技術(shù)文檔交流』

admin

2025年7月17日 0:7 本文熱度 534

昨天，我們學(xué)習(xí)了如何將導(dǎo)航欄從縱向變?yōu)闄M向。那如何將導(dǎo)航欄從左側(cè)移動到右上角呢？

我們有一個常用的語法，就是position語法。CSS 中的 position 屬性用于控制元素在頁面中的定位方式，其中 relative（相對定位）和 absolute（絕對定位）是最常用的兩種值。

?? 一、relative（相對定位）

.box {  position: relative;  top: -10px; /* 向上偏移10px */  left: 20px; /* 向右偏移20px */}

效果：元素從原位置向上移動 10px，向右移動 20px，原位置留白。

使用相對模式時，網(wǎng)頁元素會從它原本的位置進(jìn)行移動

核心特性

1. 基準(zhǔn)點：相對于元素自身在文檔流中的原始位置進(jìn)行偏移。

2. 文檔流影響：

? ? 不脫離文檔流：元素偏移后，原位置仍保留空白空間（其他元素布局不變）。

? ? 不影響其他元素：偏移僅改變自身渲染位置，不擠壓或覆蓋周圍元素。

3. 顯示模式：標(biāo)簽的原始顯示模式（如塊級、行內(nèi)）保持不變。

使用場景

? 微調(diào)元素位置：如按鈕懸停時輕微上移、圖標(biāo)偏移等。

? 創(chuàng)建定位上下文：為子元素的 absolute 定位提供參照容器（父元素設(shè)置 position: relative 但不設(shè)偏移）。

?? 二、absolute（絕對定位）

.container {  position: relative; /* 創(chuàng)建定位上下文 */  width: 300px;  height: 200px;}.absolute-box {  position: absolute;  bottom: 10px;  /* 距容器底部10px */  right: 10px;   /* 距容器右側(cè)10px */}