色哟哟国产精品一区二区真心好看,国产尿女喷潮MP3,免费无码午夜福利片69

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

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

admin

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

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

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

?? 一、relative（相對(duì)定位）

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

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

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

核心特性

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

2. 文檔流影響：

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

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

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

使用場(chǎng)景

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

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

?? 二、absolute（絕對(duì)定位）

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