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

CSS定位简介

news 来源：原创 2025/5/9 15:51:45

一、静态定位（Static Positioning）

二、相对定位（Relative Positioning）

三、绝对定位（Absolute Positioning）

四、固定定位（Fixed Positioning）

五、黏性定位（Sticky Positioning）

六、层叠顺序（Z-Index）

七、总结

CSS定位（Positioning）是网页布局中非常重要的一个概念，它允许开发者通过指定元素的位置来实现灵活的页面设计。CSS定位主要通过position属性来实现，该属性有五种值：static、relative、absolute、fixed和sticky。

一、静态定位（Static Positioning）

这是元素的默认定位方式，元素按照HTML文档流的顺序排列，不会受到其他定位方式的影响。静态定位不使用position属性，或者将position设置为static。

特点：

元素按照文档流顺序排列。
不会脱离文档流，不会影响其他元素的位置。
z-index无效。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Static Positioning</title><style>.static-box {width: 100px;height: 100px;background-color: lightblue;}</style></head><body><div class="static-box">Static Box</div></body></html>

该div按照文档流顺序排列，与其他元素保持正常布局关系。

二、相对定位（Relative Positioning）

相对定位是基于元素的正常位置进行偏移，可以通过top、right、bottom和left属性来调整元素的位置。元素仍然占据原来的空间，不会脱离文档流。

特点：

元素相对于其正常位置进行偏移。
元素仍然占据原来的空间，不会影响其他元素。
z-index有效。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Relative Positioning</title><style>.relative-box {width: 100px;height: 100px;background-color: lightcoral;position: relative;top: 20px;left: 20px;}</style></head><body><div class="relative-box">Relative Box</div></body></html>

内部的div相对于父元素偏移了20像素（向上）和10像素（向左），但父元素仍然占据原来的空间。

三、绝对定位（Absolute Positioning）

绝对定位是基于最近的非静态祖先元素进行定位，如果找不到这样的祖先元素，则基于根元素（通常是浏览器窗口）。绝对定位的元素会脱离文档流。

特点：

元素脱离文档流，不再占据空间。
可以通过top、right、bottom和left精确控制位置。
z-index有效。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Absolute Positioning</title><style>.container {position: relative;width: 300px;height: 300px;background-color: lightgray;}.absolute-box {width: 100px;height: 100px;background-color: lightgreen;position: absolute;top: 50px;left: 50px;}</style></head><body><div class="container"><div class="absolute-box">Absolute Box</div></div></body></html>

该div固定在页面的指定位置（距离顶部50像素，距离左边50像素），并且不会影响其他元素的位置。

四、固定定位（Fixed Positioning）

固定定位类似于绝对定位，但其参考点是浏览器窗口，即使滚动页面，元素的位置也不会改变。

特点：

元素脱离文档流，不占空间。
参考点是浏览器窗口，不受滚动条影响。
z-index有效。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Fixed Positioning</title><style>.fixed-box {width: 100px;height: 100px;background-color: lightpink;position: fixed;top: 10px;right: 10px;}</style></head><body><div class="fixed-box">Fixed Box</div><p>向下滚动以查看固定框保持在原位。</p><div style="height: 2000px;"></div></body></html>

该div固定在浏览器窗口的右上角，即使滚动页面，它始终位于相同位置。

五、黏性定位（Sticky Positioning）

黏性定位结合了相对定位和固定定位的特点，当元素在视口内滚动时，它会变成固定定位；当超出视口时，它会恢复为相对定位。

特点：

元素在视口内滚动时变为固定定位。
超出视口后恢复为相对定位。
z-index有效。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Sticky Positioning</title><style>.sticky-box {width: 100px;height: 100px;background-color: lightyellow;position: sticky;top: 0;}.content {height: 1500px;background-color: lightgray;padding: 20px;}</style></head><body><div class="sticky-box">Sticky Box</div><div class="content">向下滚动以查看粘性框粘在顶部。</div></body></html>

当页面滚动时，该div会固定在距离顶部0像素的位置；当滚动超出该位置时，它会恢复为相对定位。

六、层叠顺序（Z-Index）

层叠顺序决定了元素在重叠情况下的显示顺序，通过设置z-index属性，可以控制元素的堆叠顺序。需要注意的是，只有当元素具有绝对、相对或固定定位时，z-index才有效。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Z-Index</title><style>.box {position: relative;z-index: 1;background-color: lightblue;padding: 10px;}.box > div {position: absolute;z-index: 2;background-color: lightcoral;padding: 5px;}</style></head><body><div class="box">外层div<div>内层div，堆叠顺序更高</div></div></body></html>

内层div会覆盖外层div，因为它的z-index值更高。

七、总结

CSS定位提供了多种方式来控制元素的位置和布局，开发者可以根据实际需求选择合适的定位方式，例如：

使用静态定位保持自然布局；
使用相对定位实现微调；
使用绝对或固定定位实现精确控制；
使用黏性定位实现动态效果。

通过掌握这些定位方式及其特性，可以更好地设计出美观且功能强大的网页布局。

CSS定位简介

目录一、静态定位（Static Positioning） 二、相对定位（Relative Positioning） 三、绝对定位（Absolute Positioning） 四、固定定位（Fixed Positioning） 五、黏性定位（…...

编程日记 2025/5/9 15:51:45

CentOS服务器部署Docker+Jenkins持续集成环境

一、准备工作一台运行 CentOS 的服务器，确保有足够的磁盘空间、内存资源，并且网络连接稳定。建议使用 CentOS 7 或更高版本，本文以 CentOS 7 为例进行讲解。拥有服务器的 root 权限，因为后续安装软件包、配置环境等操作需要较…...

编程日记 2025/5/9 15:23:34

React受控组件的核心原理与实战精要

在 React 中，受控组件（Controlled Component） 是一种重要的模式，用于通过组件的状态来管理表单元素的值。这种模式不仅确保了数据的一致性和可预测性，还便于与其他功能（如验证和格式化）集成。本…...

编程日记 2025/5/9 15:28:24

基于python多线程多进程爬虫的maa作业站技能使用分析

基于python多线程多进程爬虫的maa作业站技能使用分析技能使用分析多线程（8核） import json import multiprocessing import requests from multiprocessing.dummy import Pooldef maa(st):url "https://prts.maa.plus/copilot/get/"m …...

编程日记 2025/5/9 15:06:19

Android studio怎么创建assets目录

在Android Studio中创建assets文件夹是一个简单的步骤，通常用于存储不需要编译的资源文件，如文本文件、图片、音频等 main文件夹，邮件new->folder-assets folder...

编程日记 2025/5/9 14:15:20

解锁 DeepSeek 模型高效部署密码：蓝耘平台全解析

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2025/5/9 15:32:24

【Spring相关知识】Spring应用如何优雅使用消息队列

文章目录概述**核心概念****使用场景****快速入门**1. 添加依赖2. 配置 Binder3. 定义消息通道4. 发送和接收消息5. 运行应用 **高级特性****优点****适用场景** 概述 Spring Cloud Stream 是一个用于构建消息驱动微服务的框架，它基于 Spring Boot 和 Spring Inte…...

编程日记 2025/5/6 6:52:11

2025牛客寒假算法基础集训营4（补题）

C Tokitsukaze and Balance String (hard) 一道规律题。赛时以为是难的算法题，就没去碰了，实际上把几种情况列出来后可能就会发现，只有首尾相同的字符串才是平衡的。首先我们容易发现，连续的1或者0是多余的，因为他们…...

编程日记 2025/5/6 13:21:08

.net一些知识点5

1.dot Net带out的参数如何使用 string name;//假设这个参数带out TestMethod(1,out name);//一定要有out 方法体中，一定要有out参数的赋值，并且能输出 2.参数的传递方式有哪些 a.值传递 b.引用传递 ref c.输出传递 out 3.设计模式知道哪些 3.us…...

编程日记 2025/5/9 14:55:17

基于Servlet简易学生信息管理系统

本次设计的学生信息管理系统，能提供以下功能： （1） 输入入学生信息并保存 （2） 显示所有学生信息 （3） 查询学生信息 （4） 修改学生信息并保存 （…...

编程日记 2025/5/9 15:27:25

IDEA编写SpringBoot项目时使用Lombok报错“找不到符号”的原因和解决

目录概述|背景报错解析解决方法 IDEA配置解决 Pom配置插件解决概述|背景报错发生背景：在SpringBoot项目中引入Lombok依赖并使用后出现"找不到符号"的问题。本文讨论在上述背景下发生的报错原因和解决办法，如果仅为了解决BUG不论原…...

编程日记 2025/5/5 9:16:11

JVM图文入门

往期推荐【已解决】redisCache注解失效，没写cacheConfig_com.howbuy.cachemanagement.client.redisclient#incr-CSDN博客【已解决】OSS配置问题_keyuewenhua.oss-cn-beijing.aliyuncs-CSDN博客【排坑】云服务器docker部署前后端分离项目域名解析OSS-CSDN博客微服…...

编程日记 2025/5/5 2:11:43

【算法】动态规划专题⑨ —— 二维费用背包问题 python

目录前置知识进入正题实战演练前置知识【算法】动态规划专题⑤ —— 0-1背包问题滚动数组优化 python 进入正题二维费用背包问题方法思路二维费用背包问题在传统背包问题的基础上增加了第二个维度的限制（如重量）。每个物品具有两种费用&#x…...

编程日记 2025/5/4 11:54:38

链表专题 /*** 链表的节点* param <E>*/ public class ListNode<E> {public E element;public ListNode<E> next;public ListNode() {}public ListNode(E element) {this.element element;}public ListNode(E element, ListNode<E> next) {this.eleme…...

编程日记 2025/4/27 13:27:03

亚远景-精通ASPICE：专业咨询助力汽车软件开发高效合规

在竞争日益激烈的汽车行业，软件开发已成为决定成败的关键因素。ASPICE（汽车软件过程改进和能力确定） 作为行业公认的软件开发框架，为汽车制造商和供应商提供了实现高效、合规开发的路线图。然而，ASPICE 的实施并非易…...

编程日记 2025/5/7 14:23:35

HALCON 数据结构

目录 1. HALCON基本数据分类 1.1 图像相关数据 1.1.1 Image（图片） 1.1.2 Region（区域） 1.1.3 XLD（轮廓） 1.2 控制类数据 1.2.1 基本控制数据类型 1.2.2 handle（句柄） 2. 数组与字典 2.1 数组类型及特点 2.1.1 Iconic数组（Objects） 2.1.2 Control数组（Tu…...

编程日记 2025/5/6 20:12:32

动手写ORM框架 - GeeORM第一天 database/sql 基础

文章目录 1 初识 SQLite2 database/sql 标准库3 实现一个简单的 log 库4 核心结构 Session本文是7天用Go从零实现ORM框架GeeORM的第一篇。介绍了 SQLite 的基础操作（连接数据库，创建表、增删记录等）。使用 Go 语言标准库 database/sql 连接并操作 SQLite 数据库，并简单封装…...

编程日记 2025/5/8 13:41:01

ubuntu conda运行kivy时报“No matching FB config found”

错误描述：本人使用ubuntu自带的python环境运行kivy是没有问题的，就是在使用conda时发生了错误，去网上寻找报错原因，却一直没有头绪（这个问题有诸多问题导致的，不敢说用我的这个方法100%能好） 1…...

编程日记 2025/5/6 14:59:35

SSM开发(十一) mybatis关联关系多表查询(嵌套查询，举例说明)

目录一、背景介绍二、一对一查询(嵌套查询) 三、一对多查询(嵌套查询) 四、嵌套查询效率评估注：关联查询则是指在一个查询中涉及到多个表的联合查询一、背景介绍当对数据库的操作涉及到多张表，这在面向对象语言如Java中就涉及到了对象与对象之间的关联关系。针对多…...

编程日记 2025/5/4 4:56:00

【AIGC】冷启动数据与多阶段训练在 DeepSeek 中的作用

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AIGC | ChatGPT 文章目录 💯前言💯冷启动数据的作用冷启动数据设计 💯多阶段训练的作用阶段 1：冷启动微调阶段 2：推理导向强化学习（RL&#xff0…...

编程日记 2025/5/4 17:45:56

Spring(26) spring-security-oauth2 官方表结构解析

目录一、什么是 spring-security-oauth2？二、spring-security-oauth2 的表结构2.1 oauth_client_details 客户端详细信息表2.2 oauth_access_token 认证授权Token记录表2.3 oauth_refresh_token 刷新授权Token记录表2.4 oauth_code 授权Code记录表一、什么是 spri…...

编程日记 2025/5/8 5:12:35

WPS如何接入DeepSeek（通过JS宏调用）

WPS如何接入DeepSeek 一、文本扩写二、校对三、翻译本文介绍如何通过 WPS JS宏调用 DeepSeek 大模型，实现自动化文本扩写、校对和翻译等功能。一、文本扩写 1、随便打开一个word文档，点击工具栏“工具”。 2、点击“开发工具”。 3、点击“查看代码”…...

编程日记 2025/5/6 7:50:14

项目的虚拟环境的搭建与pytorch依赖的下载

文章目录配置环境 pytorch的使用需要安装对应的cuda 在PyTorch中使用CUDA, pytorch与cuda不同版本对应安装指南，查看CUDA版本，安装对应版本pytorch 【超详细教程】2024最新Pytorch安装教程（同时讲解安装CPU和GPU版本） 配置环境…...

编程日记 2025/5/6 12:44:31

[每周一更]-(第133期)：Go中MapReduce架构思想的使用场景

文章目录 **MapReduce 工作流程**Go 中使用 MapReduce 的实现方式：**Go MapReduce 的特点****哪些场景适合使用 MapReduce？**使用场景1. 数据聚合2. 数据过滤3. 数据排序4. 数据转换5. 数据去重6. 数据分组7. 数据统计8.**统计文本中单词出现次数****代码…...

编程日记 2025/5/5 11:40:37

C 移位运算符

宏定义 #define GET_BIT(n) ((1 << (n))) 用于生成一个整数，该整数在第 n 位上是 1，其余位都是 0。这个宏通常用于位操作，比如设置、清除或检查某个特定位置的标志位。 1 << (n)：这是位移操作符。它将数字 1 左移 n …...

编程日记 2025/5/4 6:33:52

redis高级数据结构布隆过滤器

文章目录背景什么是布隆过滤器Redis 中的布隆过滤器布隆过滤器使用注意事项实现原理空间占用估计背景我们在使用新闻客户端看新闻时，它会给我们不停地推荐新的内容，它每次推荐时要去重，去掉那些已经看过的内容。问题来了，新闻…...

编程日记 2025/5/8 4:44:04

活动预告 |【Part1】Microsoft 安全在线技术公开课：安全性、合规性和身份基础知识

课程介绍通过参加“Microsoft 安全在线技术公开课：安全性、合规性和身份基础知识”活动提升你的技能。在本次免费的介绍性活动中，你将获得所需的安全技能和培训，以创造影响力并利用机会推动职业发展。你将了解安全性、合规性和身份的基础知识…...

编程日记 2025/5/9 14:09:22

基于DeepSeek模型的思维导图智能系统

基于DeepSeek模型的思维导图智能系统摘要：本文研究了Prompt技术在自然语言处理（NLP）中的应用，重点探讨了其在用户输入语言转换任务中的作用。基于DeepSeek模型，文章通过设计不同的Prompt并结合API调用，…...

编程日记 2025/5/5 17:47:38

【玩转 Postman 接口测试与开发2_019】第15章：利用 Postman 初探 API 性能测试（含实战截图）

《API Testing and Development with Postman》最新第二版封面文章目录第十五章 API 接口性能测试1 性能负载的类型2 Postman 负载配置3 Postman 性能测试实战3.1 Fixed 型负载下的性能测试3.2 基于数据驱动的 Postman 接口性能测试 4 性能测试的注意事项写在前面终于来到了…...

编程日记 2025/5/9 13:52:20

使用 Three.js 实现炫酷的除夕烟花特效

1，前言在除夕夜，璀璨的烟花点亮夜空，为节日增添了浓厚的喜庆氛围。在 Web 端，我们可以使用 Three.js 来模拟这种美轮美奂的烟花特效，让网页也能展现绚丽的节日气息。本文将介绍如何利用 Three.js 及其着色器技术&…...

编程日记 2025/5/6 17:03:25

【Redis keys命令有什么问题？】

Redis keys命令有什么问题？性能问题实际使用中的限制替代方案示例讲解Redis keys命令的问题示例替代方案：使用SCAN命令Java代码示例性能问题时间复杂度：keys命令的时间复杂度是O(n)，其中n是Redis中键的总数。这意味着，当Redis中存储的键数量非常大时，执行keys命令会遍历…...

编程日记 2025/5/6 12:13:44

STC51案例操作

案例 1：LED 闪烁功能描述：通过操作 P1 口寄存器，让连接在 P1.0 引脚的 LED 以一定间隔闪烁。 #include <reg51.h>// 延时函数 void delay(unsigned int time) {unsigned int i, j;for (i 0; i < time; i)for (j 0; j < 123; …...

编程日记 2025/5/8 11:15:01

顺丰数据分析（数据挖掘）面试题及参考答案

你觉得数据分析人员必备的技能有哪些？数据分析人员需具备多方面技能，以应对复杂的数据处理与解读工作。数据处理能力：这是基础且关键的技能。数据常以杂乱、不完整的形式存在，需通过清洗，去除重复、错误及缺失值数据，确保数据质量。例如，在电商销售数据中，可能存在价…...

编程日记 2025/5/6 19:58:36

【信息系统项目管理师-案例真题】2016下半年案例分析答案和详解

更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录试题一【问题1】4 分【问题2】12 分【问题3】3 分【问题4】6 分试题二【问题1】3 分【问题2】4 分【问题3】8 分【问题4】5 分【问题5】5 分试题三【问题1】4 分【问题2】8 分【问题3】5 分【问题4】8 分试题一…...

编程日记 2025/5/9 7:53:10

前端学习-页面尺寸事件以及阻止默认行为(三十三)

目录前言页面尺寸事件语法检测屏幕宽度获取宽高元素尺寸的位置总结示例代码阻止默认行为阻止冒泡语法阻止冒泡如何做阻止元素默认行为如何做总结前言晚上好各位页面尺寸事件会在窗口尺寸改变的时候触发条件语法 window.addEventListener(…...

编程日记 2025/5/4 13:29:59

人工智能领域-CNN 卷积神经网络性能调优

在自动驾驶领域，对卷积神经网络（CNN）进行性能调优至关重要，以下从数据处理、模型架构、训练过程、超参数调整和模型部署优化等多个方面为你详细介绍调优方法，并给出相应的代码示例。 1. 数据处理数据增强&#xff1…...

编程日记 2025/5/9 9:58:58

STM32的HAL库开发---高级定时器---输出比较模式实验

一、高级定时器输出比较模式实验原理定时器的输出比较模式总共有8种，本文使用其中的翻转模式，当TIMXCCR1TIMXCNT时，翻转OC1REF的电平，OC1REF为输出参考信号，高电平有效，OC1REF信号连接到0C1上面&#xff…...

编程日记 2025/4/30 21:59:25

DeepSeek使用技巧大全（含本地部署教程）

在人工智能技术日新月异的今天，DeepSeek 作为一款极具创新性和实用性的 AI，在众多同类产品中崭露头角，凭借其卓越的性能和丰富的功能，吸引了大量用户的关注。 DeepSeek 是一款由国内顶尖团队研发的人工智能，它基于先进…...

编程日记 2025/5/7 7:03:05

python安装mitmproxy遇到的问题

pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple 加-i https://pypi.tuna.tsinghua.edu.cn/simple是为了加速下载。 1、vc build-tools 发现下面错误。需要安装vc build-tools，有些py包需要vc来编译。安装路径：Micr…...

编程日记 2025/5/4 8:11:56

基于HTML生成网页有什么优势

在互联网时代，网页是人们获取信息、交流互动的重要窗口，而基于HTML生成网页，是搭建网络大厦的关键。HTML语法简洁直观，标签和属性语义明确，新手也能迅速上手，创建包含基础元素的网页，极大降低了…...

编程日记 2025/5/5 7:08:25

c++ template-3

第 7 章按值传递还是按引用传递从一开始，C就提供了按值传递（call-by-value）和按引用传递（call-by-reference）两种参数传递方式，但是具体该怎么选择，有时并不容易确定：通常对复杂类…...

编程日记 2025/5/3 23:58:55

【实战篇】巧用 DeepSeek，让 Excel 数据处理更高效

一、为何选择用 DeepSeek 处理 Excel 在日常工作与生活里，Excel 是我们频繁使用的工具。不管是统计公司销售数据、分析学生成绩，还是梳理个人财务状况，Excel 凭借其强大的功能，如数据排序、筛选和简单公式计算，为我们提供了诸多便利。但当面对复杂的数据处理任务，比如从…...

编程日记 2025/5/1 3:50:20

【prompt实战】AI +OCR技术结合ChatGPT能力项目实践（BOL提单识别提取专家）

本文原创作者：姚瑞南 AI-agent 大模型运营专家，先后任职于美团、猎聘等中大厂AI训练专家和智能运营专家岗；多年人工智能行业智能产品运营及大模型落地经验，拥有AI外呼方向国家专利与PMP项目管理证书。（转载需经授权）目录 1. 需求背景 2. 目标 3. BOL通用处理逻辑…...

编程日记 2025/5/2 2:19:09

黑马 Linux零基础快速入门到精通笔记

初识Linux Linux简介提及操作系统，我们可能最先想到的是windows和mac，这两者都属于个人桌面操作系统领域，而Linux则属于服务器操作系统领域。无论是后端软件、大数据系统、网页服务等等都需要运行在Linux操作系统上。 Linux是一个开源的操作…...

编程日记 2025/5/7 15:57:36

蓝桥杯真题 - 像素放置 - 题解

题目链接：https://www.lanqiao.cn/problems/3508/learning/ 个人评价：难度 3 星（满星：5） 前置知识：深度优先搜索整体思路深搜，在搜索过程中进行剪枝，剪枝有以下限制条件&#xf…...

编程日记 2025/5/7 12:15:18

即梦（Dreamina）技术浅析（六）：多模态生成模型

多模态生成模型是即梦（Dreamina）的核心技术之一，旨在结合文本和图像信息，生成更符合用户需求的视觉内容。多模态生成模型通过整合不同类型的数据（如文本和图像），能够实现更丰富、更精准的生成效果。 1. 基本原理 1.1 多模态生成模型概述多模态生成模型的目标是结合不…...

编程日记 2025/5/3 23:51:14

C++小等于的所有奇数和=最大奇数除2加1的平方。

缘由三种思路解题：依据算术推导得到一个规律：小等于的所有奇数和等于最大奇数除以2加1的平方。将在后续发布，总计有十种推导出来的实现代码。 int a 0,aa 1,aaa 0;cin >> a; while (aa<a) aaa aa, aa 2;cout << aaa;i…...

编程日记 2025/5/7 2:18:32

react的antd表单校验，禁止输入空格并触发校验提示

首先需要用到form组件，在form.item内添加rules属性，写正则表达式 <Form.Itemlabel"员工姓名"name"name"rules{[{ required: true, message: 员工姓名 },{ pattern: /^(?!\s*$).$/, message: 不能全是空格 },]}> <Input p…...

编程日记 2025/5/6 0:09:24