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

CSS学习14[重点]

news 2026/4/9 1:40:37

定位

  • 前言
  • 一、定位
  • 二、定位模式
    • 1. 静态定位 static
    • 2. 相对定位 relative
    • 3. 绝对定位 absolute
    • 4. 子绝父相
    • 5. 绝对定位的盒子水平居中
  • 6. 固定定位（fixed）
  • 7. 叠放次序（z）
  • 三、四种定位总结
  • 四、定位模式转换

前言

为什么学习定位？
应用场景：图片上移动的物体、突出的部分、导航栏…

一、定位

  1. 边偏移

    top: 100px;
    bottom: ;
    left: ;
    right: ;

  2. 定位模式

    选择器{position: absolute;}
    值包含static|relative|absolute|fixed

  3. 完整定位=边偏移+定位模式

二、定位模式

1. 静态定位 static

（1）静态定位是所有元素默认的定位方式，即html的标准流。
（2）对于边偏移无效。
（3）一般用来清除定位

2. 相对定位 relative

（1）以自己的左上角为基准移动
（2）可以通过边偏移继续占有原来的位置
（3）相对定位的元素仍在原来的位置，相对定位不脱标，目的在于移动位置

<html>
<head><style>div {width: 100px;height: 100px;background-color: pink;}div:nth-child(2) {position: relative;top: 10px;background-color: purple;}</style>
</head>
<body><div></div><div></div>
</body>
</html>

3. 绝对定位 absolute

绝对定位完全脱标，不占有位置

（1）父级没有定位
如果父级没有定位，则以浏览器为标准定位。

<html>
<head><style>.father {width: 100px;height: 100px;background-color: pink;margin: 100px;}.son {width: 100px;height: 100px;position: absolute;top: 10px;left: 10px;background-color: purple;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

（2）父级有定位
如果父级有定位，则以父级为基准。

<html>
<head><style>.father {width: 100px;height: 100px;background-color: pink;margin: 100px;position: relative;}.son {width: 100px;height: 100px;position: absolute;top: 10px;left: 10px;background-color: purple;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

4. 子绝父相

子级是绝对定位，父级只要是定位即可。
相对定位 占有位置 不脱标
绝对定位 不占有位置 脱标

<html>
<head><style>div {width: 310px;height: 190px;border: 1px solid #fff;margin: 50px;padding: 10px;}.top {position: absolute;top: 0;left: 0; }</style>
</head>
<body><div><!--绝对定位，下面的会跑上去--><img src="#.jpg" alt=""><img src="#.jpg" alt="" class="top"></div>
</body>
</html>

5. 绝对定位的盒子水平居中

（1）加了绝对定位的盒子，margin: 0 auto; 无效
（2）如何使其水平居中？

	水平：left: 50%; margin-left: -w;垂直：top: 50%; margin-top: -h;

<html>
<head><style>.father {width: 500px;height: 300px;background-color: palegoldenrod;position: relative;margin: 0 auto;}.son {width: 100px;height: 100px;position: absolute;background-color: purple;margin: 0 auto; /*无效*/left: 250px;left: 50%; /*父级盒子一半*/margin-left: -50px;}</style>
</head>
<body><div class="father"><!--绝对定位，下面的会跑上去--><div class="son"></div></div>
</body>
</html>

（3）淘宝图例子

<html>
<head><style>* {margin: 0;padding: 0;}ul {list-style: none;}.slider {width: 500px;height: 300px;background-color: palegoldenrod;position: relative;margin: 50px auto;}.arrow-l,.arrow-r {width: 20px;height: 30px;position: absolute;background-color: purple;display: block;top: 50%;margin-top: -10px;}.arrow-l {left: 0;}.arrow-r {right: 0;}/*小圆点*/.circle {width: 65px;height: 20px;background-color: rgba(0,0,0,0.3);position: absolute;bottom: 15px; /*靠下对齐*/left: 50%;margin-left: -32px;border-radius: 10px 10px;}.circle li {width: 10px;height: 10px;background-color: #ccc;float: left;margin: 5px 3px;border-radius: 50%;}</style>
</head>
<body><div class="slider"><!--绝对定位，下面的会跑上去--><img src="#.png"><a href="" class="arrow-l"><img src="#.png"></a><a href="" class="arrow-r"><img src="#.png"></a><ul class="circle"><li></li><li></li><li></li><li></li></ul></div>
</body>
</html>

6. 固定定位（fixed）

（1）固定定位是绝对定位的特殊形式
（2）固定定位的元素和父亲没有任何关系，只认浏览器
（3）固定定位完全脱标，不占有位置，不随滚动条滚动
（4）例子

<html>
<head><style>* {margin: 0;padding: 0;}.a {width: 100%;height: 10px;background-color: palegoldenrod;position: fixed;}.box {width: 100px;height: 1000px;background-color: purple;padding-top: 10px;}   </style>
</head>
<body><div class="a"></div><div class="box">123</div>
</body>
</html>

7. 叠放次序（z）

叠放次序用于调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，可以取值正整数、负整数、0.

<html>
<head><style>div {width: 200px;height: 200px;background-color: pink;position: absolute;top: 0;left: 0;}div:first-child {z-index: 1;}div:nth-child(2) {background-color: purple;top: 30px;left: 30px;z-index: 2;}div:nth-child(3) {background-color: skyblue;top: 60px;left: 60px;}</style>
</head>
<body><div></div><div></div><div></div>
</body>
</html>

注意：

  • z-index默认属性是0，取值越大，定位元素在层叠元素中越居上
  • 如果取值相同，按照书写顺序后来居上
  • 后面的数字不能加单位
  • 只有相对定位、绝对定位、固定定位有这个属性，其余标准流、浮动、静态定位没有该属性

三、四种定位总结

定位模式
静态定位static：不脱标，正常模式
相对定位relative：不脱标，占有位置，相对自身移动
绝对定位absolute：完全脱标，不占有位置，相对于定位父级移动
固定定位fixed：完全脱标，不占有位置，相对于浏览器移动

四、定位模式转换

（1）和浮动一样，元素添加了绝对定位和固定定位后，元素模式会转换为行内块模式
（2）行内元素如果添加了绝对定位或者固定定位后，不用转换直接给高度和宽度。

相关文章：

CSS学习14[重点]

定位 前言一、定位二、定位模式1. 静态定位 static2. 相对定位 relative3. 绝对定位 absolute4. 子绝父相5. 绝对定位的盒子水平居中 6. 固定定位&#xff08;fixed&#xff09;7. 叠放次序&#xff08;z&#xff09;三、四种定位总结四、定位模式转换 前言 为什么学习定位&am…...

编程日记 2024/9/6 12:32:23

力扣 | 递归 | 区间上的动态规划 | 486. 预测赢家

文章目录 一、递归二、区间动态规划 LeetCode&#xff1a;486. 预测赢家 一、递归 注意到本题数据范围为 1 < n < 20 1<n<20 1<n<20&#xff0c;因此可以使用递归枚举选择方式&#xff0c;时间复杂度为 2 20 1024 ∗ 1024 1048576 1.05 1 0 6 2^{20…...

编程日记 2024/9/6 12:31:23

黑白格

题目描述 小杨有一个 n 行 m 列的网格图&#xff0c;其中每个格子要么是白色&#xff0c;要么是黑色。 小杨想知道至少包含 k 个黑色格子的最小子矩形包含了多少个格子。 输入格式 第一行包含三个正整数 n,m,k&#xff0c;含义如题面所示。 之后 n 行&#xff0c;每行⼀个…...

编程日记 2024/9/6 12:29:21

数据链路层（MAC地址）

文章目录 数据链路层&#xff08;MAC地址&#xff09;1、以太网2、以太网帧格式3、MAC地址4、对比理解 MAC 地址和 IP 地址5、最大传输单元&#xff08;MTU&#xff09;6、MTU 对 IP 协议的影响7、MTU 对 UDP 协议的影响8、MTU 对 TCP 协议的影响9、查看硬件地址和 MTU10、ARP …...

编程日记 2024/9/6 12:28:20

【ruby java】登陆功能/邮件发送模版240903

Rails 风格登录系统添加全面而详细的注释&#xff0c;解释每个部分的功能和用途。​​​​​​​​​ 详细注释&#xff0c;解释了每个文件和代码块的功能。以下是一些关键点的总结&#xff1a; 1. 控制器&#xff08;Controllers&#xff09;: - ApplicationController: …...

编程日记 2024/9/6 12:26:17

告别格式不兼容烦恼！ape转换mp3，分享3个简单方法

各位读者们&#xff0c;你们是否有过这种体验&#xff1a;满怀期待地在网上下载一首好听的歌曲&#xff0c;结果怎么点击手机都播放不了&#xff0c;定睛一看&#xff0c;弹窗显示“无法播放该音频文件”。这是为什么呢&#xff1f;原来那首歌的音频格式是ape&#xff0c;不被手…...

编程日记 2024/9/6 12:24:16

Java核心知识体系-并发与多线程：线程基础

1 先导 Java线程基础主要包含如下知识点&#xff0c;相信我们再面试的过程中&#xff0c;经常会遇到类似的提问。 1、线程有哪几种状态? 线程之间如何转变&#xff1f; 2、线程有哪几种实现方式? 各优缺点&#xff1f; 3、线程的基本操作&#xff08;线程管理机制&#xff…...

编程日记 2024/9/6 12:23:15

KRaft模式下的Kafka启动指南：摆脱Zookeeper依赖

一、背景介绍 多年来&#xff0c;人们一直在同时使用Apache ZooKeeper和Apache Kafka。但是自Apache Kafka 3.3发布以来&#xff0c;它就可以在没有ZooKeeper的情况下运行。同时它包含了新的命令kafka-metadata-quorum和kafka-metadata-shell?该如何安装新版kafka&#xff0c…...

编程日记 2024/9/6 12:22:13

【数据库】MySQL-基础篇-函数

专栏文章索引&#xff1a;数据库 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 目录 一、简介 二、字符串函数 三、数值函数 四、日期函数 五、流程函数 一、简介 函数 是指一段可以直接被另一段程序调用的程序或代码。 也就意味着&#xff0c;这一段程序或代码在 M…...

编程日记 2024/9/6 12:20:12

dp练习【4】

最长数对链 646. 最长数对链 给你一个由 n 个数对组成的数对数组 pairs &#xff0c;其中 pairs[i] [lefti, righti] 且 lefti < righti 。 现在&#xff0c;我们定义一种 跟随 关系&#xff0c;当且仅当 b < c 时&#xff0c;数对 p2 [c, d] 才可以跟在 p1 [a, b…...

编程日记 2024/9/6 12:16:08

php 实现推荐算法

在PHP中实现推荐算法的应用场景通常包括电商、社交媒体、内容平台等。推荐算法可以帮助用户找到与其兴趣相关的内容&#xff0c;提高用户体验和平台黏性。以下是几种常见的推荐算法及其PHP实现方式&#xff1a; 1. 基于协同过滤的推荐算法 协同过滤&#xff08;Collaborative…...

编程日记 2024/9/6 12:15:07

相机光学（三十六）——光圈

0.参考链接 &#xff08;1&#xff09;Hall光圈和Piris光圈的区别 &#xff08;2&#xff09;自动光圈及P-IRIS原理 1.光圈分类 Hall光圈和Piris光圈是两种不同的光圈技术。它们之间的区别如下&#xff1a; Hall光圈&#xff1a;Hall光圈是一种传统的光电子元件&#xff0c;通…...

编程日记 2024/9/6 12:13:05

数据结构——树和二叉树

目录 一、树的概念 二、树结点之间的关系 三、二叉树 1、满二叉树 2、完全二叉树 四、二叉树的存储 1、顺序存储 2、链式存储 一、树的概念 如果数据和数据之间满足一对多的关系&#xff0c;将其逻辑结构称之为树 如下图&#xff1a;树的根与树的分支存在一对多的关系 将上…...

编程日记 2024/9/6 12:07:59

142. Go操作Kafka（confluent-kafka-go库）

文章目录 Apache kafka简介开始使用Apache Kafka构建生产者构建消费者 总结 之前已经有两篇文章介绍过 Go如何操作 kafka 28.windows安装kafka&#xff0c;Go操作kafka示例&#xff08;sarama库&#xff09; 51.Go操作kafka示例&#xff08;kafka-go库&#xff09; Apache ka…...

编程日记 2024/9/6 12:06:59

spring boot(学习笔记第十九课)

spring boot(学习笔记第十九课) Spring boot的batch框架&#xff0c;以及Swagger3(OpenAPI)整合 学习内容&#xff1a; Spring boot的batch框架Spring boot的Swagger3&#xff08;OpenAPI&#xff09;整合 1. Spring boot batch框架 Spring Batch是什么 Spring Batch 是一个…...

编程日记 2024/9/6 12:04:57

docker安装 redis 并且加密开启SSL/TLS通道

拉取镜像 docker pull registry.cn-hangzhou.aliyuncs.com/qiluo-images/redis:latest docker tag registry.cn-hangzhou.aliyuncs.com/qiluo-images/redis:latest redis:latest要在 Docker 容器中启动 Redis 并开启 SSL/TLS 加密&#xff0c;需按照以下步骤修改启动命令和配置…...

编程日记 2024/9/6 12:03:56

什么是ARM架构？什么是X86架构？两者的区别是什么？

一、什么是ARM架构 &#xff08;一&#xff09;起源于发展 ARM 架构由英国剑桥的 Acorn 计算机公司开发。因市场无合适产品&#xff0c;Acorn 自行设计出第一款微处理器&#xff0c;命名为 ARM。此后 ARM 架构不断发展&#xff0c;1990 年为与苹果合作成立 ARM 公司&#xff0…...

编程日记 2024/9/6 12:01:54

【vscode】vscode paste image插件设置

本文首发于 ❄️慕雪的寒舍 vscode编辑md文件的时候&#xff0c;如果想插入图片&#xff0c;自带的粘贴只会粘贴到当前目录下&#xff0c;也没有文件重命名&#xff0c;很不友好。 在扩展商店里面有mushan的Paste Image插件&#xff0c;相比自带的&#xff0c;更加友好一点。但…...

编程日记 2024/9/6 12:00:54

自定义string类

#include <iostream> #include <string> int main() { std::string str "Hello, World!"; // 使用 c_str() 将 std::string 转换为 C 风格字符串&#xff0c;并传递给 printf printf("The string is: %s\n", str.c_str()); // 尝试修改…...

编程日记 2024/9/6 11:57:52

Python | Leetcode Python题解之第387题字符串中的第一个唯一字符

题目&#xff1a; 题解&#xff1a; class Solution:def firstUniqChar(self, s: str) -> int:position dict()q collections.deque()n len(s)for i, ch in enumerate(s):if ch not in position:position[ch] iq.append((s[i], i))else:position[ch] -1while q and po…...

编程日记 2024/9/6 11:56:51

嵌入式程序main()退出处理机制与优化实践

1. 嵌入式程序执行的生命周期解析在裸机嵌入式开发中&#xff0c;程序执行流程与通用计算机存在本质差异。以8051架构为例&#xff0c;当开发者在Keil环境下编写一个简单的LED控制程序时&#xff0c;完整的执行链条包含以下几个关键阶段&#xff1a;硬件复位阶段&#xff08;0x…...

编程新知 2026/4/9 1:11:15

造相-Z-Image-Turbo提示词自动化：使用JavaScript开发动态提示词生成器

造相-Z-Image-Turbo提示词自动化&#xff1a;使用JavaScript开发动态提示词生成器 你是不是也遇到过这样的烦恼&#xff1f;想用AI画一张特定风格的人像&#xff0c;比如“一个戴着贝雷帽、有着金色卷发、微笑的少女&#xff0c;背景是巴黎街头”&#xff0c;结果在提示词框里…...

编程新知 2026/4/9 0:44:47

YOLO11 改进 - 特征融合 | MSAA多尺度注意力聚合模块， 多尺度卷积融合与双通道注意力机制

前言 本文介绍了将多尺度注意力聚合（MSAA）模块与YOLO11结合的方法。MSAA是CM - UNet中用于优化编码器特征、强化跳跃连接的核心模块，能解决遥感图像物体尺度差异大、多尺度特征融合弱的问题。它采用空间与通道双分支并行处理，先对输入的相邻三层特征进行拼接，再分别进行空…...

编程新知 2026/4/9 0:20:28

Go语言全栈开发从入门到精通：微服务架构与云原生实战指南

Go语言全栈开发从入门到精通：微服务架构与云原生实战指南 这不是一篇停留在 Demo 层面的 Go 教程，而是一篇面向真实业务系统的工程化实践文章。我们将围绕“高并发订单中心”这个典型场景，从语言特性、架构演进、分布式通信、数据一致性、可观测性、Kubernetes 部署到生产问…...

编程新知 2026/4/8 22:40:29

别再死磕复杂模型了！用Python+NumPy手把手教你从卫星J2000坐标算出经纬度

从卫星J2000坐标到经纬度&#xff1a;Python实战指南 当拿到卫星的J2000坐标数据时&#xff0c;如何快速将其转换为可在地图上显示的经纬度&#xff1f;本文将用Python和NumPy带你一步步实现这个转换过程&#xff0c;避开复杂的理论推导&#xff0c;专注于代码实现和实际问题解…...

编程新知 2026/4/8 21:47:33

MindSpore 环境配置完全指南呕

前面我们对 Kafka 的整体架构和一些关键的概念有了一个基本的认知&#xff0c;本文主要介绍 Kafka 的一些配置参数。掌握这些参数的作用对我们的运维和调优工作还是非常有帮助的。 写在前面 Kafka 作为一个成熟的事件流平台&#xff0c;有非常多的配置参数。详细的参数列表可以…...

编程新知 2026/4/8 21:45:32

不用装软件！这款MicroPython浏览器 IDE :让你在手机上也能调试树莓派 Pico弛

1、普通的insert into 如果&#xff08;主键/唯一建&#xff09;存在&#xff0c;则会报错 新需求&#xff1a;就算冲突也不报错&#xff0c;用其他处理逻辑 回到顶部 2、基本语法&#xff08;INSERT INTO ... ON CONFLICT (...) DO (UPDATE SET ...)/(NOTHING)&#xff09; 语…...

编程新知 2026/4/8 21:13:16

实战复盘】游戏上市公司合同系统实施案例（六）：被忽视的IT力量——为什么业务主导的项目更需要IT深度参与？

本文为《游戏上市公司合同系统实施案例》系列第六篇。 &#x1f449; &#xff08;一&#xff09;业务背景&#xff5c;&#xff08;二&#xff09;多维预算&#xff5c;&#xff08;三&#xff09;合同预警&#xff5c;&#xff08;四&#xff09;安全攻防&#xff5c;&#x…...

编程新知 2026/4/8 20:51:00

OpenClaw 龙虾 = 效率倍增器 + 数字员工孵化器+附安装教程

作为一个每天和电脑打交道 12 小时的 IT 从业者&#xff0c;我用过不下 50 款 AI 工具&#xff0c;但能让我坚持用了 3 个月、每天都离不开的&#xff0c;只有OpenClaw 龙虾。很多人还把它当成普通的聊天机器人&#xff0c;这真的大错特错。OpenClaw 龙虾不是未来科技&#xff…...

编程新知 2026/4/8 20:42:56

OpenClaw如何做好记忆持久化的 · 六、经济学与可扩展性——记忆的代价

六、经济学与可扩展性——记忆的代价⏱ 30 秒速览 | 中度使用&#xff08;日均 50 次对话&#xff09;纯记忆附加成本&#xff1a;~$5/月&#xff08;Claude Sonnet&#xff09;/ ~$1/月&#xff08;GPT-4o-mini&#xff09;。72% 花在记忆注入&#xff0c;24% 花在自动提取&am…...

编程新知 2026/4/8 20:42:56