&

零基礎網頁開發8??（CSS的position語法）

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

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

昨天，我們學習了如何將導航欄從縱向變為橫向。那如何將導航欄從左側移動到右上角呢？

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

?? 一、relative（相對定位）

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

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

使用相對模式時，網頁元素會從它原本的位置進行移動

核心特性

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

2. 文檔流影響：

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

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

3. 顯示模式：標簽的原始顯示模式（如塊級、行內）保持不變。

使用場景

? 微調元素位置：如按鈕懸停時輕微上移、圖標偏移等。

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

?? 二、absolute（絕對定位）

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

效果：.absolute-box 固定在容器的右下角，不隨容器外內容滾動而移動。

如果使用了絕對模式，元素在定位時會以“包裹該元素的容器”來進行計算

核心特性

1. 基準點：相對于最近的已定位祖先元素（非 static）定位。若無，則相對于初始包含塊（通常是視口或 <html> 根元素）。

2. 文檔流影響：

? ? 完全脫離文檔流：元素不占據空間，后續元素會填充其原位置。

? ? 可覆蓋其他元素：需通過 z-index 控制層疊順序。

3. 顯示模式：元素變為塊級框（無論原為行內或塊級），寬高屬性生效。

使用場景

? 精確位置控制：如彈出層、工具提示、懸浮按鈕。

? 固定位置元素：相對于父容器而非視口（需父元素設置 position: relative）。

這里，我們把<ul>標簽，即網站的導航欄設為“絕對模式”

right：5vw中的“vw”是指什么呢？vw（Viewport Width）是 CSS 中的一種相對長度單位，代表視口寬度的百分比。1vw 等于當前瀏覽器視口寬度的 1%。

使用相對長度單位的好處，是當視口因為不同裝置呈現不同大小時，vw的數值也會根據視口寬度進行自動調整。

好啦，今天的內容就先到這里咯，明天我們講解如何在插入圖片logo的同時保留<h1>文字。

閱讀原文：原文鏈接

該文章在 2025/7/18 10:23:33 編輯過

關鍵字查詢

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。