零基础网页开发8️⃣（CSS的position语法）

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2025年7月17日 0:7 本文热度 9

昨天，我们学习了如何将导航栏从纵向变为横向。那如何将导航栏从左侧移动到右上角呢？

我们有一个常用的语法，就是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协同办公管理系统。