深入掌握CSS定位:构建精密布局的核心技术
一、定位的定义
定位(Positioning)是CSS中用于控制元素在网页中的具体位置的一种机制。通过定位,可以将元素放置在页面的任意位置,并控制其与其他元素的层叠关系。
二、定位的特点与作用
-
自由摆放位置:
允许元素摆放在网页的任意位置,不受标准流或Flex布局的限制。 -
解决层叠问题:
定位后的元素层级较高,可以覆盖在其他未定位的元素之上。 -
固定位置显示:
可以让元素始终固定在浏览器窗口的某个位置,不随页面滚动而移动。
三、常用的定位类型
3.1、不同定位总视图
定位类型 | 属性值 | 参照物 | 是否脱标 | 显示模式变化 | 常见用途示例 |
---|---|---|---|---|---|
相对定位 | relative | 元素自身原来的位置 | 否 | 无 | 微调元素位置,作为绝对定位的祖先容器 |
绝对定位 | absolute | 最近已定位的祖先元素或视口 | 是 | 类似 inline-block | 精确定位子元素,实现弹出菜单等效果 |
固定定位 | fixed | 浏览器视口 | 是 | 类似 inline-block | 固定导航栏、返回顶部按钮等 |
3.2、相对定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>相对定位示例</title><style>/* 相对定位:1、相对与自身原来的位置 2、相对定位不会脱标 */.box1 {width: 200px;height: 200px;background-color: lightblue;position: relative; /* 启用相对定位 */top: 50px;left: 100px;}.box2{width: 200px;height: 200px;background-color: lightblue;position: relative; /* 启用相对定位 */left: 200px;}</style>
</head>
<body><div class="box1">相对定位的盒子1</div><div class="box2">相对定位的盒子2</div>
</body>
</html>
相对定位特点:
1、相对与自身原来的位置
2、相对定位不会脱标
3.3、绝对定位
父容器没有定位时:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>绝对定位示例</title><style>/* 绝对定位:1、相对与父容器的定位(当父容器中没有其他定位的时候,父容器有定位时以有定位的父容器作为参照物)2、不会脱标 */.parent {width: 500px; height: 500px;background-color: #95d349;position: relative; /* 父容器使用相对定位 */margin: 100px auto;}.child1 {width: 200px;height: 200px;background-color: lightcoral;position: absolute; /* 子元素使用绝对定位 */top: 50px;left: 50px;}.child2 {width: 200px;height: 200px;background-color: lightcoral;position: absolute; /* 子元素使用绝对定位 */top: 100px;left: 100px;}</style>
</head>
<body><div class="parent"><div class="child1">绝对定位的子盒子1</div><div class="child2">绝对定位的子盒子2</div></div>
</body>
</html>
父容器有定位的时(子绝父相):
<!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"><title>绝对定位(子绝父相)</title><style>* {margin: 0;padding: 0;}img {width: 400px;}.news {position: relative;border: 1px solid #000000;margin: 100px auto;width: 400px;height: 350px;background-color: #f8f8f8;}/* 1. 脱标,不占位2. 参照物:先找最近的已经定位的祖先元素;如果所有祖先元素都没有定位,参照浏览器可视区改位置3. 显示模式特点改变:宽高生效(具备了行内块的特点)*/.news span {position: absolute;top: 0;right: 0;/* display: block; */width: 92px;height: 32px;background-color: rgba(0,0,0,0.6);text-align: center;line-height: 32px;color: #fff;}</style>
</head>
<body><div class="news"><img src="./images/news.jpg" alt=""><span>展会活动</span><h4>2222世界移动大会</h4></div>
</body>
</html>
绝对定位特点:
1. 脱标,不占位
2. 参照物:先找最近的已经定位的祖先元素;如果所有祖先元素都没有定位,参照浏览器可视区改位置
3. 显示模式特点改变:宽高生效(具备了行内块的特点)
3.4、固定定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>固定定位示例</title><style>body {height: 2000px; /* 让页面可以滚动 */}.fixed-nav {width: 100%;height: 60px;background-color: #333;color: white;text-align: center;line-height: 60px;position: fixed; /* 固定定位 */top: 0;left: 0;z-index: 1000; /* 保证在其他内容之上 */}</style>
</head>
<body><div class="fixed-nav">我是固定导航栏</div><p style="margin-top: 80px;">向下滚动看看效果吧...</p>
</body>
</html>
四、定位居中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>58-定位居中</title><style>img {/* 1、绝对定位 */position: absolute;/* 2、水平、垂直边偏移为50% */top: 50%;left: 50%;/* 3、子级向左、上移动自身尺寸的一半 *//* margin-top: -127px;margin-left: -265px; *//* 更方便,此时的50%就是自己宽度的一半 */transform: translate(-50%, -50%);}</style>
</head>
<body><img src="./images/login.webp" alt="">
</body>
</html>
transform: translate(-50%, -50%);能够快速设置设置元素的居中。
五、z-index堆叠层级
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>堆叠层级</title><style>/* 定位的层叠属性默认为后来者居上,想要改变的话可以添加z-index属性值改变 */div{position: absolute;width: 200px;height: 200px;}.box1{background-color:pink;/* 取值是整数,默认是0,取值越大显示顺序越靠上 */z-index:1}.box2{z-index: 0;background-color: skyblue;left:100px;top:100px;}.box3{z-index: 2;background-color: yellow;left:200px;top:200px;}</style>
</head>
<body><div class="box1">div1</div><div class="box2">div2</div><div class="box3">div3</div>
</body>
</html>
六、总结
常用定位:
定位类型 | 属性值 | 参照物 | 是否脱标 | 显示模式变化 | 常见用途示例 |
---|---|---|---|---|---|
相对定位 | relative | 元素自身原来的位置 | 否 | 无 | 微调元素位置,作为绝对定位的祖先容器 |
绝对定位(子绝父相) | absolute | 最近已定位的祖先元素或添加了定位的视口 | 是 | 类似 inline-block | 精确定位子元素,实现弹出菜单等效果 |
固定定位 | fixed | 浏览器视口 | 是 | 类似 inline-block | 固定导航栏、返回顶部按钮等 |
定位居中:
transform: translate(-50%, -50%);
z-index堆叠层级:
取值是整数,默认是0,取值越大显示顺序越靠上
相关文章:
深入掌握CSS定位:构建精密布局的核心技术
一、定位的定义 定位(Positioning)是CSS中用于控制元素在网页中的具体位置的一种机制。通过定位,可以将元素放置在页面的任意位置,并控制其与其他元素的层叠关系。 二、定位的特点与作用 自由摆放位置: 允许元素摆放…...
使用达梦数据库官方管理工具SQLark导入与导出数据库表
SQLark 是达梦数据官方自主研发的、一款面向信创应用开发者的数据库开发和管理工具。只需简单注册,即可永久免费使用其客户端功能。该工具支持连接达梦、Oracle、MySQL 等多种数据库,为开发者提供了便捷的跨平台操作体验。通过访问官网 www.sqlark.com&a…...
Linux系统管理与编程19:自动部署dns
兰生幽谷,不为莫服而不芳; 君子行义,不为莫知而止休。 #!/bin/bash #----------------------------------------------------------- #前提条件:准备好虚拟机,①外网内网畅通,②yum源搭建好 # File Name: …...
JavaScript高级进阶(七)
this对象 想知道this对象是什么,我们先来看一段简单的小代码: <style> div{ width: 200px; height: 200px; background-color: skyblue; } </style> </head> <body> <div…...
前端面试每日三题 - Day 32
这是我为准备前端/全栈开发工程师面试整理的第32天每日三题练习: ✅ 题目1:Electron主流架构模式深度解析 核心架构模式对比 模式优点缺点适用场景单一窗口模式开发简单、资源占用低功能扩展受限小型工具类应用多窗口模式模块解耦、独立运行进程管理复…...
MySQL全量,增量备份与恢复
目录 一.MySQL数据库备份概述 1.数据备份的重要性 2.数据库备份类型 3.常见的备份方法 二:数据库完全备份操作 1.物理冷备份与恢复 2.mysqldump 备份与恢复 3.MySQL增量备份与恢复 3.1MySQL增量恢复 3.2MySQL备份案例 三:定制企业备份策略思路…...
摆脱拖延症的详细计划示例
以下是一个以一周为周期,帮助你摆脱拖延症的详细计划示例,你可以根据自己的实际情况进行调整和完善。 --- # 摆脱拖延症一周计划 ## 一、计划目标 通过一系列有针对性的方法和行动,逐步克服拖延习惯,提高任务执行效率和自我管理…...
Linux512 ssh免密登录 ssh配置回顾
下载MX 官网 参考 OK 登个tom试试 然后再计划登个RealServer 计划再用仅主机网卡试试 连不上 看来要通过JumpServer再联 通过网卡访问 被踢掉了 成功通过跳板机JumpServer登入到RealServer 方法一免密登录 现计划尝试方法二 只有1个tom 我连了两个tom 看来是根据IP划…...
批量重命名bat
作为一名程序员,怎么可以自己一个个改文件名呢! Windows的批量重命名会自动加上括号和空格,看着很不爽,写一个bat处理吧!❥(ゝω・✿ฺ) 功能:将当前目录下的所有文件名里面当括号和空格都去掉。 用法&…...
Unity动画系统使用整理 --- Playable
Playable API 是一个强大的工具,用于更灵活地控制动画、音频、脚本等时间轴内容的播放和混合。它提供了比传统 Animator 更底层、更可控的方式管理时间轴行为,尤其适合复杂动画逻辑或动态内容组合的场景。 优点: 1.Playables API 支…...
用C语言实现的——一个完整的AVL树的交互式系统
一、知识要点 AVL树(Adelson-Velsky and Landis Tree)是一种自平衡二叉搜索树,由俄罗斯计算机科学家 Georgy Adelson-Velsky 和 Evgenii Landis 在 1962 年提出。它具备以下特点: AVL树的性质 二叉搜索树(排序树&am…...
洛谷B3648 [语言月赛202208] 你几岁了
#include<bits/stdc.h> using namespace std; int main(){int n;cin>>n;cout<<"I am "<<n<<" years old.";return 0; }...
智能指针入门:深入理解 C++ 的 shared_ptr
文章目录 前言一、什么是 shared_ptr?二、创建share_ptr三、使用share_ptr1.输出结果2.结果分析 四、工作原理五、注意事项六、使用场景总结 前言 提示:这里可以添加本文要记录的大概内容: 在 C 的开发中,手动管理内存一直是一项…...
十四、继承与组合(Inheritance Composition)
十四、继承与组合(Inheritance & Composition) 引言 C最引人注目的特性之一是代码复用。组合:在新类中创建已有类的对象。继承:将新类作为已有类的一个类型来创建。 14.1 组合的语法 Useful.h //C14:Useful.h #ifndef US…...
自主添加删除开机启动项
背景 有些程序我们需要每次开机自启动,譬如自装的第三方输入法或者网络代理软件等等,而有些程序我们不希望它每次开机自启动,但是奈何这些软件安装的时候自己就给配置好了开机自启动,咱们不知道该去哪找。 anyway,问题…...
2025年第十六届蓝桥杯软件赛省赛C/C++大学A组个人解题
文章目录 题目A题目C:抽奖题目D:红黑树题目E:黑客题目F:好串的数目 https://www.dotcpp.com/oj/train/1166/ 题目A 找到第2025个素数 #include <iostream> #include <vector> using namespace std; vector<i…...
Clickhouse 迁移到 Doris 的最佳实践
一、引言 在将数据从 Clickhouse 迁移到 Apache Doris / SelectDB Cloud 的过程中,涉及表结构迁移、查询语句迁移以及数据迁移等多个关键环节。每个环节都有其复杂性和需要注意的细节,本文将详细介绍这些内容及对应的最佳实践方法。 二、表结构迁移 &…...
thinkphp模板文件缺失没有报错/thinkphp无法正常访问控制器
省流:没有出现下图的报错可能是空路由规则的问题。 编者在编写一个新的控制器时还未建立模板文件,理应出现如下报错 但是浏览器非但没有报错,反而无法正常访问所有有问题的控制器,表现为都为空白页面,正常的控制器可…...
Spring AI 与 Hugging Face 深度集成:打造高效文本生成应用
Spring AI 与 Hugging Face 深度集成:打造高效文本生成应用 前言 在人工智能技术蓬勃发展的时代,大型语言模型(LLM)在自然语言处理领域展现出了强大的能力。Hugging Face 作为人工智能社区的重要一员,提供了丰富的模…...
异步FIFO的学习
一、参考视频 FPGA(异步FIFO原理及Verilog代码实现)_哔哩哔哩_bilibili 二、设计图 高位套圈时,格雷码和二进制不一样的地方 需要注意的问题 为什么二进制的变化位数更多,就更容易产生亚稳态呢? 格雷码 格雷码&…...
Java——API基础(String类和StringBuilder类)
一、API概述 API:应用程序编程接口(是一些包含了属性和方法的类) Java API:指的就是JDK中提供各种功能的Java类 二、String类(在lang包下,不需要导包) (一)概述 1.J…...
OpenCV图像金字塔详解:原理、实现与应用
一、什么是图像金字塔? 图像金字塔是图像处理中一种重要的多尺度表示方法,它通过对图像进行重复的平滑和降采样(或上采样)操作,生成一系列分辨率逐渐降低(或升高)的图像集合。这种结构形似金字…...
AI Agent(11):垂直行业应用
引言 本文将聚焦AI Agent在金融、医疗健康、制造业以及零售与电商四个重要垂直行业的应用。我们将分析每个行业的特定需求和挑战,探讨AI Agent如何通过专业化能力为这些行业创造价值,并展望未来发展趋势。 垂直行业AI Agent的核心价值在于将通用AI能力与行业专业知识深度结…...
FFmpeg 项目中的三大核心工具详解
FFmpeg 项目中的三大核心工具详解 FFmpeg 是一个功能强大的开源多媒体框架,能够处理几乎所有格式的音视频文件。它包含三个主要的命令行工具:ffmpeg、ffplay 和 ffprobe,这三个工具各自承担不同的功能,共同构成了 FFmpeg 项目的核心。下面将全面详细地介绍这三个工具。 1…...
【Linux网络】 HTTP cookie与session
HTTP cookie与session 引入HTTP Cookie 定义 HTTP Cookie(也称为Web Cookie、浏览器Cookie或简称Cookie)是服务器发送到用户浏览器并保存在浏览器上的一小块数据,它会在浏览器之后向同一服务器再次发起请求时被携带并发送到服务器上。通常&…...
STM32入门教程——GPIO输出
前言 本教材基于B站江协科技课程整理,适合有C语言基础、刚接触STM32的新手。它梳理了STM32核心知识点,帮助大家把C语言知识应用到STM32开发中,更高效地开启STM32学习之旅。 目录 前言 1.知识储备 1.GPIO简介 2.GPIO基本结构 1.APB2外设…...
MongoDB使用x.509证书认证
文章目录 自定义证书生成CA证书生成服务器之间的证书生成集群证书生成用户证书 MongoDB配置java使用x.509证书连接MongoDBMongoShell使用证书连接 8.0版本的mongodb开启复制集,配置证书认证 自定义证书 生成CA证书 生成ca私钥: openssl genrsa -out ca…...
FEKO许可证的安全与合规性
在电磁仿真领域,FEKO软件因其出类拔萃的性能和广泛的应用场景,赢得了全球用户的广泛赞誉。但在这背后,是什么让FEKO在众多竞争者中脱颖而出?答案是其许可证的安全与合规性。它们不仅为用户提供了坚固的保障,更确保了用…...
AI大模型学习二十、利用Dify+deepseekR1 使用知识库搭建初中英语学习智能客服机器人
一、说明 很多情况下 LLM 知识库可以让 Agent 从中定位到准确的信息,从而准确地回答问题。在一些特定领域,比如客服、检索工具等有应用。 传统的客服机器人往往是基于关键词检索的,当用户输入了关键词以外的问题,机器人就无法解决…...
kubuntu系统详解
Kubuntu 系统深度解析(从系统架构到用户体验) 一、定位与核心特性 Kubuntu 是 Ubuntu 的官方 KDE 衍生版,基于 Ubuntu 的稳定底层(Debian 技术栈),搭载 KDE Plasma 桌面环境,主打 “功能丰富、…...
【AutoGen革命】多智能体协作系统的架构设计与工程实践
目录 🌍 前言🏗️ 技术背景与价值🚨 当前技术痛点🛠️ 解决方案全景👥 目标读者画像 🧠 一、技术原理剖析🖼️ 系统架构图解💡 核心运行机制⚙️ 关键技术组件🔄 技术选型…...
西电 | 2025年拟录取研究生个人档案录取通知书邮寄通知
各位考生: 我校2025年硕士研究生录取工作已结束,根据相关工作管理规定,现将个人档案转调及录取通知书邮寄信息确认等有关事宜通知如下: 一、个人档案转调 (邮寄档案请务必使用EMS) 1.全日制考生 录取类…...
9.0 C# 调用solidworks介绍1
一、C# 与 SolidWorks 联合开发概述 SolidWorks 提供了完整的 API(应用程序接口),允许开发者使用 C# 等编程语言进行二次开发,实现自动化设计、定制功能等。 主要技术要点包括: 1. API 结构:SolidWorks API 是基于 COM 的接口,包含数百个对象和数千个方法…...
Linux复习笔记(三) 网络服务配置(web)
遇到的问题,都有解决方案,希望我的博客能为你提供一点帮助。 二、网络服务配置 2.3 web服务配置 2.3.1通信基础:HTTP协议与C/S架构(了解) HTTP协议的核心作用 Web服务基于HTTP/HTTPS协议实现客户端ÿ…...
git和gdb
git基础使用 相关概念 本地仓库:自己电脑上git客户端 远端仓库:管理员端的git服务端 多人协作:文件开源,可以多个人一起修改 前提 1.一个仓库 2.确认git有没有安装 3.把远端仓库clone 这一步执行完后我们执行ll可以看到&…...
CSRF记录
CSRF(Cross-site request forgery)跨站请求伪造:攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证,绕过后台的用户验证,达…...
嵌入式MCU和Linux开发哪个好?
MCU与Linux:十年磨剑后的选择之道 MCU和Linux到底怎么选?这是一个老生畅谈的问题。 而我更想说,这不是简单的优劣对比,而是两条不同的道路,通往不同的风景。今天,我想以一个老兵的视角,聊聊这…...
2024年北理工Python123第六章编程题整理
这章的编程题都好少,难度也不高 开始进入文件的输入输出 一、字典翻转输出 我的代码: ori_dic eval(input()) dic{} if(not isinstance(ori_dic,dict)):#验证输入格式print(输入错误) else:for item in ori_dic.keys():dic[ori_dic.get(item)]itempri…...
一、HAL库的设计理念详解:从架构到实践
HAL库的设计理念详解:从架构到实践 一、HAL库的诞生背景与核心目标 STM32 HAL库(Hardware Abstraction Layer)是STMicroelectronics在2016年推出的新一代驱动框架,旨在解决STM32系列芯片不断扩展带来的开发复杂性问题。随着STM3…...
【Python】UV:单脚本依赖管理
一、基础概念 什么是 Python 脚本 以 .py 结尾的文件,可通过 python script.py 独立执行。UV 工具优势:无需手动创建或激活虚拟环境,自动为每个脚本生成隔离环境,保证依赖互不干扰。 环境管理原理 graph LRA[系统 Python 环境] -…...
多线程(2)——Thread类及常见方法
目录 构造方法常见属性前台线程,后台线程 启动一个线程——start()中断(终止)一个线程方法1:通过变量方法2:使用 isInterrupted() ---线程内置的标志位 等待一个线程——join()join设置等待时间 获取当前线程引用---cu…...
Neo4j 入门级使用
一、集成步骤 (一)创建 Spring Boot 项目 使用 Spring Initializr 创建项目时,选择 Maven 或 Gradle 作为项目构建工具,选择合适的 Spring Boot 版本,并添加 “Spring Data Neo4j” 依赖。 (二ÿ…...
解决 CJSON 浮点数精度问题:从 `cJSON_AddNumberToObject` 到 `cJSON_AddRawToObject`
在使用 CJSON 库处理浮点数时,开发者常会遇到一个棘手问题:浮点数的小数位精度丢失。例如,数值 3.1400 可能被简化为 3.14,甚至 5.0 被显示为 5。这种默认行为在需要严格保留小数位的场景(如金融、物联网传感数据&…...
ESP32开发入门(九):HTTP服务器开发实践
一、HTTP服务器基础 1.1 什么是HTTP服务器? HTTP服务器是能够处理HTTP请求并返回响应的网络服务程序。在物联网应用中,ESP32可以作为轻量级HTTP服务器,直接接收来自客户端(如浏览器、手机APP)的请求。 1.2 ESP32作为HTTP服务器的特点 轻量…...
谱聚类,大模型
使用谱聚类将相似度矩阵分为2类的步骤如下: 1. **构建相似度矩阵**:提供的1717矩阵已满足对称性且对角线为1。 2. **计算度矩阵**:对每一行求和得到各节点的度,形成对角矩阵。 3. **计算归一化拉普拉斯矩阵**:采用对…...
K8S Ingress、IngressController 快速开始
假设有如下三个节点的 K8S 集群: k8s31master 是控制节点 k8s31node1、k8s31node2 是工作节点 容器运行时是 containerd 一、理论介绍 1)什么是 Ingress 定义:Ingress 是 Kubernetes 中的一种资源对象,它定义了外部访问集群内…...
AI边缘网关_5G/4G边缘计算网关厂家_计讯物联
AI边缘网关是边缘计算与人工智能技术深度融合的产物,作为连接终端设备与云端的桥梁,在网络边缘实现数据采集、实时分析、智能决策和协议转换,显著降低了数据传输延迟,节省了云端资源,并提升了隐私保护能力,…...
【Vue】Composables 和 Utils 区别
1. 核心功能与状态管理 • Composables 用于封装有状态的逻辑,通常结合 Vue 的响应式 API(如 ref、reactive)和生命周期钩子(如 onMounted),可管理组件内部的状态和副作用。例如,封装鼠标位置…...
右值和移动
值类别(value categories) lvalue 通常可以放在等号左边的表达式, 左值 例子 变量,函数或数据成员的名字返回左值引用的表达式,如x, x 1, cout << ’ . x 1 和 x返回的都是对x的int&. x则返回的是int字符串字面量如 “hello world” rva…...
如何在 Bash 中使用 =~ 操作符 ?
在 Bash 脚本世界中,有各种操作符可供我们使用,使我们能够操作、比较和测试数据。其中一个操作符是 ~ 操作符。这个操作符经常被忽视,但功能非常强大,它为我们提供了一种使用正则表达式匹配字符串模式的方法。 ~ 操作符语法 语法…...