当前位置：首页 > news >正文

五种 CSS 位置类型以实现更好的布局

news 2025/7/3 4:51:23

在 Web 开发中，CSS（层叠样式表）用于设置网站样式的设置。为了控制网页上元素的布局，使用CSS的position属性。因此，在今天这篇文章中，我们将了解 CSS 位置及其类型。

CSS 位置属性用于控制网页上元素的位置。它定义了元素相对于其包含元素或视口的定位方式。

以下是位置属性的可能值：

1）Static

这是所有 HTML 元素定位的默认值。在此定位中，元素按照文档的正常流程定位，这意味着它们按照 HTML 结构一个接一个地定位。此模式下元素的位置由其边距和填充决定。

将 top、right、bottom 或 left 属性应用于静态定位的元素将不会产生任何效果。z-index 也不适用于静态元素。

语法：

position: static;

举个例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>CSS position property</title></head><body><div class="box box1">Box1</div><div class="box box2">Box2</div><div class="box box3">Box3</div></body>
</html>

CSS：

.box {height: 100px;width: 100px;border-radius: 10px;margin: 10px;text-align: center;color: white;padding: 10px;
}
.box1 {background-color: red;
}
.box2 {background-color: blue;position: static;
}
.box3 {background-color: green;
}

输出：

在上面的例子中，我们有 3 个盒子，它们都具有相同的高度和宽度。position: static;属性仅应用于第二个框。

但是，第二个框的布局与其他两个框没有区别，因为 static 是所有 HTML 元素的默认值。

2) relative

使用position: relative元素遵循其正常的文档流，但可以从其原始位置移动。这可以使用 top、right、bottom 和 left 属性来实现。

使用此属性，周围的元素不会受到影响，但元素原本处于静态位置的位置将会有空间。

语法：

position: relative;

举个例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>CSS position property</title></head><body><div class="box box1">Box1</div><div class="box box2">Box2</div><div class="box box3">Box3</div></body>
</html>

CSS：

.box {height: 100px;width: 100px;border-radius: 10px;margin: 10px;text-align: center;color: white;padding: 10px;
}
.box1 {background-color: red;
}
.box2 {background-color: blue;position: relative;top: 20px;left: 50px;
}
.box3 {background-color: green;
}

输出：

在上面的示例中，第二个框向下移动 20 像素（使用 top 属性），向右移动 50 像素（使用 left 属性）。移动的框不会影响周围元素（框 1 和框 3）的位置。

3）absolute

使用position:absolute的元素不遵循文档的正常流程。该元素相对于其最近定位的祖先（具有相对、绝对、固定或粘性定位的元素）进行定位。

语法：

position: absolute;

举个例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>CSS position property</title></head><body><div class="box box1">Box1</div><div class="container"><div class="box box2">Box2</div></div><div class="box box3">Box3</div></body>
</html>

CSS：

.box {height: 100px;width: 100px;border-radius: 10px;margin: 10px;text-align: center;color: white;padding: 10px;
}
.container {border: 3px solid black;height: 200px;width: 200px;position: relative;
}
.box1 {background-color: red;
}
.box2 {background-color: blue;position: absolute;top: 30px;left: 50px;
}
.box3 {background-color: green;
}

输出：

在上面的示例中，第二个盒子位于容器内。容器的位置设置为相对，第二个框的位置设置为绝对，并且该框向下移动 30 像素（使用 top 属性），向右移动 50 像素（使用 left 属性）。容器是第二个盒子的祖先。

如果没有祖先怎么办？

然后该元素将相对于视口定位。

例如：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>CSS position property</title></head><body><div class="box box1">Box1</div><div class="box box2">Box2</div><div class="box box3">Box3</div></body>
</html>

CSS：

.box {height: 100px;width: 100px;border-radius: 10px;margin: 10px;text-align: center;color: white;padding: 10px;
}
.box1 {background-color: red;
}
.box2 {background-color: blue;position: absolute;top: 30px;left: 50px;
}
.box3 {background-color: green;
}

输出：

4）fixed

使用位置：固定元素相对于视口定位，并且即使页面滚动也保持固定。

语法：

position: fixed;

举个例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>CSS position property</title></head><body><div class="box box1">Box1</div><div class="box box2">Box2</div><div class="box box3">Box3</div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></body>
</html>

CSS：

.box {height: 100px;width: 100px;border-radius: 10px;margin: 10px;text-align: center;color: white;padding: 10px;border: 1px solid black;
}
.box1 {background-color: red;
}
.box2 {background-color: blue;position: fixed;top: 50px;left: 50px;
}
.box3 {background-color: green;
}

输出：

在上面的示例中，即使向下滚动页面，第二个框的位置也将是固定的。

有了这个属性，就不像position:relative; 元素原本处于静态位置的位置将不再有空间。

5）sticky

使用position: sticky;元素根据用户的滚动位置进行定位。它的行为类似于相对元素，直到用户滚动到某个位置，之后它相对于其包含元素或视口变得固定。

语法：

position: sticky;

举例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>CSS position property</title></head><body><div class="box box1">Box1</div><div class="box box2">Box2</div><div class="box box3">Box3</div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></body>
</html>

CSS：

.box {height: 100px;width: 100px;border-radius: 10px;margin: 10px;text-align: center;color: white;padding: 10px;border: 1px solid black;
}
.box1 {background-color: red;
}
.box2 {background-color: blue;position: sticky;top: 50px;left: 50px;
}
.box3 {background-color: green;
}

在上面的示例中，第二个框将表现得像一个相对元素，直到它到达位置 top: 50px; 滚动时，它将表现得像一个固定元素。

CSS 中的position 属性确定元素相对于其包含元素或视口的位置。

位置属性有以下可能值：

static：这是所有 HTML 元素的默认定位。元素按照文档的正常流程定位并遵循 HTML 结构。
relative：具有position：relative的元素遵循其正常的文档流，但可以从其原始位置移动。
绝对：使用位置：绝对的元素不遵循文档的正常流程。该元素相对于其最近定位的祖先进行定位。如果没有祖先，则该元素将相对于视口定位。
固定：具有位置：固定的元素相对于视口定位，并且即使页面滚动也保持固定。
Sticky：具有position：sticky的元素根据用户的滚动位置进行定位。

通过充分掌握位置属性，我们可以在网页中获得所需的布局和交互。

总结

到这里，今天这篇文章想要与您分享的内容就结束了，希望对您有所帮助。

五种 CSS 位置类型以实现更好的布局

在 Web 开发中，CSS（层叠样式表）用于设置网站样式的设置。为了控制网页上元素的布局，使用CSS的position属性。因此，在今天这篇文章中，我们将了解 CSS 位置及其类型。 CSS 位置属性用于控制网页上元素的位置…...

编程日记 2023/8/29 22:26:49

【真题解析】系统集成项目管理工程师 2022 年下半年真题卷（综合知识）

本文为系统集成项目管理工程师考试(软考) 2022 年下半年真题（全国卷），包含答案与详细解析。考试共分为两科，成绩均 ≥45 即可通过考试： 综合知识（选择题 75 道，75分）案例分析&#x…...

编程日记 2023/8/29 22:25:47

视频中的声音怎么提取出来？这样做提取出来很简单

提取视频中的声音可以有多种用途。例如，我们可能希望从视频中提取音乐或音效，以在其他项目中使用。或者，可能需要将视频中的对话转录为文本，以便更轻松地编辑和共享内容。无论目的是什么，提取视频中的声音都可以帮助我…...

编程日记 2023/8/29 22:24:45

【Qt学习】05：自定义封装界面类

OVERVIEW 自定义封装界面类1.QListWidget2.QTreeWidget3.QTableWidget4.StackedWidget5.Others6.自定义封装界面类-显示效果（1）添加设计师界面类（2）在ui中设计自定义界面（3）在需要使用的界面中添加&#xf…...

编程日记 2023/8/29 22:23:43

网络服务第二次作业

[rootlocalhost ~]# vim /etc/httpd/conf.d/vhosts.conf <Virtualhost 192.168.101.200:80> #虚拟主机IP及端口 DocumentRoot /www/openlab #网页文件存放目录 ServerName www.openlab.com #服务器域名 </VirtualHost> …...

编程日记 2023/8/29 22:22:42

【记录】USSOCOM Urban3D 数据集读取与处理

Urban3D数据集内容简介 Urban3D数据集图像为正摄RGB影像，分辨率为50cm。从SpaceNet上使用aws下载数据，文件夹结构为： |- 01-Provisional_Train|- GT|- GT中包含GTC，GTI，GTL.tif文件，GTL为ground truth b…...

编程日记 2023/8/29 22:21:41

flutter ios webview不能打开http地址

参考 1、iOS添加信任 webview_flutter 在使用过程中会iOS出现无法加载HTTP请求的情况， 但是Flutter 却可以加载HTTP请求。这就与两个的框架有关了，Flutter是独立于UIKit框架的。解决方案就是在iOS 的info.plist中添加对HTTP的信任。 <key>NSApp…...

编程日记 2023/8/29 22:20:40

【SpringBoot】详细介绍SpringBoot中Entity类中的getters和setters

在Spring Boot中的Entity类中，getters和setters是用来获取和设置对象属性值的方法。它们是Java Bean规范的一部分，并且通常被用于向开发人员和框架公开类的属性。在Entity类中，getters和setters方法通常通过property来实现，即将…...

编程日记 2023/8/29 22:19:38

阿里云服务器搭建FRP实现内网穿透-P2P

前言在了解frp - p2p之前，请先了解阿里云服务器搭建FRP实现内网穿透-转发: 文章地址 1、什么是frp - p2p frp（Fast Reverse Proxy）是一个开源的反向代理工具，它提供了多种功能，包括端口映射、流量转发和内网穿透等。…...

编程日记 2023/8/29 22:18:36

Vue3 Element-plus Upload 上传图片

技术栈：Vue3 Ts Element-plus 官网地址：Upload 上传 | Element Plus 一、背景： 表单上传图片功能二、效果： 三、流程： ①点击上传图片按钮，系统弹出文件选择对话框，选择图片并确认 ②调…...

编程日记 2023/8/29 22:17:35

文章目录操作教程操作教程 CloudCompare下载官网：https://www.danielgm.net/cc/release/ 安装flatpak插件 sudo apt install flatpak添加库路径 flatpak remote-add flathub https://flathub.org/repo/flathub.flatpakrepo安装CC flatpak install flathub or…...

编程日记 2023/8/29 22:16:33

【LeetCode-中等题】138. 复制带随机指针的链表

文章目录题目解题核心思路：找random指针指向思路一：哈希思路二：迭代构造新链表方法一：哈希递归方法二：纯哈希方法三：迭代节点拆分题目解题核心思路：找random指针指向这里的拷贝属于深拷…...

编程日记 2023/8/29 22:15:32

C++--动态规划背包问题(1)

1. 【模板】01背包_牛客题霸_牛客网你有一个背包，最多能容纳的体积是V。现在有n个物品，第i个物品的体积为vivi ,价值为wiwi。 （1）求这个背包至多能装多大价值的物品？ （2）若背包恰好装满&a…...

编程日记 2023/8/29 22:14:29

【Android-Flutter】我的Flutter开发之旅

目录: 0、文档：1、在Windows上搭建Flutter开发环境（1）[使用中国镜像(❌详细看官方文档)](https://docs.flutter.dev/community/china)（2）[下载最新版Flutter SDK（已包含Dart）](https://docs.flu…...

编程日记 2023/8/29 22:13:28

【Linux】深入理解文件操作

文章目录初次谈论文件重温C语言文件操作系统文件操作接口openwriteread 再次谈论文件文件描述符文件描述符的分配规则重定向什么是重定向重定向的本质系统调用接口实现重定向<、>、>> 初次谈论文件开始之前先谈论一下关于文件的一些共识性问题。一个文件可以…...

编程日记 2023/8/29 22:12:26

异地使用PLSQL远程连接访问Oracle数据库【内网穿透】

文章目录前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程Oracle 前言 Oracle，是甲骨文公司的一款关系…...

编程日记 2023/8/29 22:11:24

【方案】基于AI边缘计算的智慧工地解决方案

一、方案背景在工程项目管理中，工程施工现场涉及面广，多种元素交叉，状况较为复杂，如人员出入、机械运行、物料运输等。特别是传统的现场管理模式依赖于管理人员的现场巡查。当发现安全风险时，需要提前报告&#xff0…...

编程日记 2023/8/29 22:10:23

华为各型号交换机开启SNMP v3

设备型号：华为S5720S-28P-LI-AC 设备软件版本：V200R011C10SPC600 调试命令： snmp-agent snmp-agent sys-info version v3 snmp-agent group v3 GroupName privacy //{GroupName}是设置一个SNMP的组名，我设置是SNMPGroup snm…...

编程日记 2023/8/29 22:09:20

CocosCreator3.8研究笔记（一）windows环境安装配置

一、安装Cocos 编辑器 （1）、下载Cocos Dashboard安装文件 Cocos 官方网站Cocos Dashboard下载地址 ： https://www.cocos.com/creator-download9下载完成后会得到CocosDashboard-v2.0.1-win-082215.exe 安装文件，双击安装即可。 …...

编程日记 2023/8/29 22:08:19

【JavaWeb 专题】15个最经典的JavaWeb面试题

文章目录 HTTP长连接和短连接HTTP/1.1 与 HTTP/1.0 的区别可扩展性缓存带宽优化长连接消息传递Host 头域错误提示 AjaxAjax 的优势： JSP 和 servlet 有什么区别？定义区别 JSP 的9大内置对象及作用JSP 的 4 种作用域？session 和 cookie 有什么…...

编程日记 2023/8/29 22:07:18

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分）《Learning Humanoid Standing-up Control across Diverse Postures》系列文章：论文深度解读 + 算法与代码分析（二）作者机构：上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学论文主题：人形机器人…...

编程新知 2025/6/17 5:29:50

AtCoder 第409场初级竞赛 A~E题解

A Conflict 【题目链接】原题链接：A - Conflict 【考点】枚举【题目大意】找到是否有两人都想要的物品。【解析】遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。【难度】 GESP三级【代码参考】 #i…...

编程新知 2025/6/16 11:04:37

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块，它提供了一个轻量级的 HTTP 服务器实现，主要用于构建基于 HTTP 的应用程序和服务。功能介绍： 主要功能 HTTP服务器功能： 支持 HTTP/1.1 协议简单的请求/响应处理模型支持 GET…...

编程新知 2025/6/16 12:49:42

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/6/25 23:57:55