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

CSS中的定位

news 2026/5/12 21:58:47

position 的属性与含义

CSS 中的 position 属性用于控制元素在页面中的定位方式，有四个主要的取值，每个取值都会影响元素的布局方式，它们是：

  1. static（默认值）： 这是所有元素的初始定位方式。在静态定位下，元素会按照它们在文档流中的顺序依次排列，不受 top、right、bottom、left 等属性的影响。静态定位的元素无法通过 z-index 属性来改变其层叠顺序。

  2. relative： 相对定位会相对于元素在文档流中的初始位置进行定位。可以使用 top、right、bottom、left 属性来调整元素的位置，但元素在文档流中的位置不会改变，仍占据原来的空间。

  3. absolute： 绝对定位会相对于最近的已定位（非static）祖先元素进行定位。如果没有已定位的祖先元素，那么会相对于文档的初始包含块进行定位。绝对定位会从文档流中脱离，不占据文档流空间，可以使用 top、right、bottom、left 属性来控制位置，而且可以通过 z-index 属性来改变元素的层叠顺序。

  4. fixed： 固定定位会相对于视口（浏览器窗口）进行定位，元素会随着页面滚动而保持在固定位置，不随滚动而移动。固定定位的元素也不占据文档流空间，可以使用 top、right、bottom、left 属性来确定位置，同样可以通过 z-index 来控制层叠顺序。

<!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>Document</title><style>body{margin: 0;padding: 0;}.top{position: static;left: 100px;background: red;width: 200px;height: 80px;}.parent{position: relative;top: 50px;left: 50px;width: 200px;height: 200px;background: greenyellow;}.child1{width: 50px;width: 50px;position: absolute;top: 50px;left: 0;background: blanchedalmond;}.child2{width: 300px;height: 20px;position: fixed;top: 0;left: 0;background: blueviolet;}</style>
</head>
<body><div class="top">我是最上面的节点</div><div class="parent"><div class="child1">child1</div><div class="child2">child2</div></div>
</body>
</html>

在这里插入图片描述

display、float、position的关系

display、float 和 position 是 CSS 中用于控制元素布局和定位的三个重要属性，它们之间有一定的关系和交互，但分别用于不同的布局和定位方式。

  1. display 属性： display 属性用于控制元素在文档流中的显示方式。它的常见取值包括 block、inline、inline-block、flex、grid 等。不同的 display 值会影响元素的布局方式。例如，block 元素会在页面上占据一整行，而 inline 元素会在同一行内排列。display 属性与 float 和 position 属性通常是互斥的，即一个元素不会同时使用这三个属性来控制布局。

  2. float 属性： float 属性用于将元素浮动到其容器的左侧或右侧，以使其他元素可以环绕它。通常用于创建文本环绕图片等效果。float 属性不会使元素脱离文档流，但会影响元素的布局。当使用 float 时，其他元素可能需要通过 clear 属性来清除浮动元素的影响，以防止出现意外的布局问题。

  3. position 属性： position 属性用于控制元素的定位方式。它的常见取值包括 static、relative、absolute 和 fixed。不同的 position 取值会影响元素的定位方式和是否脱离文档流。position 属性通常与 top、right、bottom 和 left 属性一起使用，以精确定位元素。使用 position 属性时，元素的定位可以是相对于文档的初始包含块、相对于最近的已定位（非 static）祖先元素，或相对于视口（浏览器窗口）。

虽然这三个属性在控制元素的布局和定位上有一定的交互，但它们各自有不同的应用场景和目的。通常情况下：

  • display 用于控制元素的基本显示方式，如块级元素、行内元素等。
<!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>Document</title><style>.span1, .span2{display: block;width: 100px;height: 50px;background: grey;margin-bottom: 20px;}.content2{margin-top: 50px;}.div1, .div2{display: inline;/* 设置为行内元素 宽高设置无效 */width: 100px;height: 200px;margin-left: 10px;background: gold;}</style>
</head>
<body><div><!-- 行内元素设置宽高无效 --><span style="height: 80px;width: 100px; background: red">行</span></div><div><span class="span1">我是行内元素1</span><span class="span2">我是行内元素2</span></div><div class="content2"><div class="div1">我是块级元素1</span><div class="div2">我是块级元素2</div></div>
</body>
</html>

在这里插入图片描述

  • float 用于创建文本环绕效果或多栏布局。
<!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>Document</title><style>img {float: left; /* 或者 float: right; */margin-right: 10px; /* 为了增加文字和图片之间的间距 */width: 50px;height: 50px;}.content{width: 150px;height: 200px;}/* -------------以下是多栏布局的样式---------------- */.column {width: 100%;}.column-item {width: 30%; /* 每栏的宽度 */float: left;background: greenyellow;margin-right: 2%; /* 为了增加栏目之间的间距 */box-sizing: border-box; /* 防止边框和填充增加宽度 */}</style>
</head>
<body><!-- 文字环绕部分 --><div class="content"><img src="./image.jpg" alt="图片"><p>这是一段文本，会围绕在图片周围。这是一段文本，会围绕在图片周围。这是一段文本，会围绕在图片周围。</p></div><!-- 多栏布局 --><div class="column"><div class="column-item">栏目 1</div><div class="column-item">栏目 2</div><div class="column-item">栏目 3</div></div>
</body>
</html>

在这里插入图片描述

  • position 用于精确定位元素的位置，通常与 top、right、bottom 和 left 一起使用。
    这个就不举例子了，上面又定位的例子

absolute与fixed

absolute 和 fixed 是 CSS 中用于控制元素定位的两种方式，它们有一些共同点和不同点：

共同点：

  1. 都脱离文档流： 无论是 absolute 还是 fixed 定位的元素都脱离了文档流，不再占据正常的文档流位置，因此不会对其他元素的布局产生影响。

  2. 可以通过 top、right、bottom 和 left 精确定位： 无论是 absolute 还是 fixed 元素，都可以使用这四个属性来精确地确定它们在页面中的位置。

  3. 可以通过 z-index 控制层叠顺序： 使用 z-index 属性，你可以控制 absolute 和 fixed 元素的层叠顺序，即哪个元素位于其他元素的上方。

不同点：

  1. 相对于不同的参照物：

    • absolute：absolute 定位的元素相对于其最近的已定位（非 static）祖先元素进行定位。如果没有已定位的祖先元素，它会相对于文档的初始包含块（viewport）进行定位。
    • fixed：fixed 定位的元素相对于视口（浏览器窗口）进行定位，而不受页面滚动的影响。

  2. 在滚动时的行为不同：

    • absolute：随着页面滚动，absolute 定位的元素会保持相对于其最近的已定位祖先元素不变的位置。
    • fixed：fixed 定位的元素会保持固定在视口的位置，不会随页面滚动而移动。

  3. 是否影响其他元素：

    • absolute：absolute 定位的元素脱离文档流，但在脱离文档流之前会占据原来的文档流位置，可能会影响其他元素的布局。
    • fixed：fixed 定位的元素脱离文档流，并且不占据文档流位置，不会影响其他元素的布局。

sticky 定位

sticky 定位是一种相对于元素自身在正常文档流中的位置和祖先元素的滚动容器滚动的一种定位方式。它在某些情况下表现为普通的文档流定位（static 或 relative），但当元素的位置在视口中发生变化时，它会变为固定定位（fixed）。

要理解 sticky 定位，可以将其看作是 relative 和 fixed 定位的混合。它适用于创建元素在页面滚动时粘性（sticky）地保持在某个位置的效果，通常用于创建固定的导航栏或侧边栏。

关键特点和使用方法：

  1. 相对于滚动容器定位： sticky 元素会相对于其最近的具有滚动条的祖先元素进行定位。如果没有这样的祖先元素，则相对于视口进行定位。

  2. 初始位置： 元素的初始位置由其在文档流中的位置决定，就像 relative 定位一样。在初始位置时，元素不会脱离文档流。

  3. 滚动触发： 当页面滚动到达特定位置（通常是元素初始位置之上或之下的某个点）时，元素会变为固定定位，就像 fixed 定位一样，保持在特定位置，直到滚动容器滚动超过元素的范围。

  4. 滚动范围： sticky 元素在滚动容器内保持固定定位，直到滚动到达滚动容器的底部或顶部，或者直到它的容器边界，取决于滚动的方向。

  5. 使用 top、right、bottom、left 控制位置： 可以使用这些属性来精确定位 sticky 元素在切换到固定定位时的位置。

示例用法：

.sticky-element {position: -webkit-sticky; /* 兼容性写法 */position: sticky;top: 20px; /* 滚动触发后的垂直位置 */
}

<div class="scroll-container"><!-- 具有 sticky 定位的元素 --><div class="sticky-element">这是一个 sticky 元素。</div><!-- 页面内容 -->
</div>

在示例中，.sticky-element 是一个具有 sticky 定位的元素，当页面滚动到一定位置时，它会保持在距离顶部 20 像素的位置，直到滚动容器（.scroll-container）的底部。

相关文章：

CSS中的定位

position 的属性与含义 CSS 中的 position 属性用于控制元素在页面中的定位方式&#xff0c;有四个主要的取值&#xff0c;每个取值都会影响元素的布局方式&#xff0c;它们是&#xff1a; static&#xff08;默认值&#xff09;&#xff1a; 这是所有元素的初始定位方式。在静…...

编程日记 2023/9/21 23:28:10

二、链表（linked-list）

文章目录 一、定义二、经典例题&#xff08;一&#xff09;[21.合并两个有序链表](https://leetcode.cn/problems/merge-two-sorted-lists/description/)1.思路2.复杂度分析3.注意4.代码 &#xff08;二&#xff09;[86.分割链表](https://leetcode.cn/problems/partition-list…...

编程日记 2023/9/21 23:27:08

Android EditText筛选+选择功能开发

在日常开发中经常会遇到这种需求&#xff0c;EditText既需要可以筛选&#xff0c;又可以点击选择。这里筛选功能用的是AutoCompleteTextView&#xff0c;选择功能使用的是第三方库https://github.com/kongzue/DialogX。 Android AutoCompleteTextView(自动完成文本框)的基本使用…...

编程日记 2023/9/21 23:25:06

Linux 信号 alarm函数 setitimer函数

/*#include <unistd.h>unsigned int alarm(unsigned int seconds);功能&#xff1a;设置定时器。函数调用&#xff0c;开始倒计时&#xff0c;0的时候给当前的进程发送SIGALARM信号参数&#xff1a;倒计时的时长。。单位&#xff1a;秒 如果参数为0&#xff0c;无效返回…...

编程日记 2023/9/21 23:24:05

自主设计，模拟实现 RabbitMQ - 实现发送方消息确认机制

目录 一、实现发送方消息确认 1.1、需求分析 什么是发送方的消息确认？ 如何实现？...

编程日记 2023/9/21 23:22:02

【数据结构】二叉树的·深度优先遍历（前中后序遍历）and·广度优先（层序遍历）

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …...

编程日记 2023/9/21 23:21:00

优彩云采集器下载-免费优彩云采集器下载地址

免费优彩云采集器。您是否曾为了数据采集而感到头疼不已&#xff1f;是否一直在寻找一种能够轻松、高效地获取所需数据的方法&#xff1f;别着急&#xff0c;让我们一起来了解如何通过优彩云采集器解决这些问题&#xff0c;从而让您产生购买的欲望。 免费全自动采集发布批量管理…...

编程日记 2023/9/21 23:19:59

【Python】OJ 常用函数

这里写目录标题 一. math1. 求阶乘 - factorial()2. 绝对值 - fabs() 二. 容器的方法1. reverse() 三. Python 内置函数1. sort() 一. math 需要引入 math 包&#xff1a;import math 1. 求阶乘 - factorial() import math print(math.factorial(5))--------运行结果-------…...

编程日记 2023/9/21 23:18:59

【Vue】上万个字把事件处理讲解的淋漓尽致

hello&#xff0c;我是小索奇&#xff0c;精心制作的Vue系列教程持续更新哈&#xff0c;想要学习&巩固&避坑就一起学习吧~ 事件处理 事件的基本用法 重点内容 使用v-on:xxx缩写xxx绑定事件&#xff0c;其中 xxx 是事件名&#xff08;回顾&#xff1a;v-bind缩写为冒号…...

编程日记 2023/9/21 23:17:57

Remmina中VNC、SSH和RDP的区别

Remmina 可以在 Linux 系统上对远程进行连接。它支持多种远程连接协议&#xff0c;包括 VNC&#xff08;Virtual Network Computing&#xff09;、SSH&#xff08;Secure Shell&#xff09;和 RDP&#xff08;Remote Desktop Protocol&#xff09;。这些协议用于实现不同类型的…...

编程日记 2023/9/21 23:16:56

Spring Boot实现web.xml功能

Spring Boot实现web.xml功能 1. 基于注解实现1.1 组件注册1.2 WebInitParam注解 2. 基于编码实现2.1 Servlet & Filter2.2 Listener 3. 总结 在Spring Boot中&#xff0c;不再需要使用传统的 web.xml 文件来配置web应用的功能&#xff0c;Spring Boot支持通过注解和基于代码…...

编程日记 2023/9/21 23:14:55

陆拾捌- 如何通过数据影响决策（三）

一、如何正确的引导别人&#xff1f; 引导与误导的区别是什么&#xff1f; 看下面这广告图 单看上面大字的结果&#xff0c;感觉好像真的使用过的人均觉得有好处 可如果我们看下面的细字 对111位连续14天食用&#xff08;本产品&#xff09;的燕麦片非重度使用者所做调研… 从…...

编程日记 2023/9/21 23:13:54

VMware 三种网络连接模式

VMware虚拟机的三种网络连接模式&#xff1a;桥接&#xff0c;NAT&#xff0c;仅主机。 网卡vmnet0,vmnet1,vmnet8区别。 在VMware中&#xff0c;虚拟机的网络连接主要是由VMware创建的虚拟交换机负责实现的&#xff0c;VMware可以根据需要创建多个虚拟网络。 VMware的虚拟网…...

编程日记 2023/9/21 23:08:48

Scikit-Learn快速生成分类数据集

假如你学习了新的分类算法并想进一步探索研究、尝试不同的超参数评估模型性能&#xff0c;但问题是你找不到好的数据集用于实验。幸运的是Scikit-Learn 提供的 make_classification() 方法可以创建不同类型的数据集&#xff0c;它可以生成不同类型的数据集&#xff1a;二分类、…...

编程日记 2023/9/21 23:07:48

西门子 S7 协议解析

目录 1 建立连接 2 读数据 3 写数据 1 建立连接 03 00 00 16 11 E0 00 00 00 01 00 C1 02 10 00 C2 02 03 01 C0 01 0A &#xff08;第一次握手报文&#xff09; 03 00 报文头 00 16 数据总长度&#xff1a;22 11 E0 00 00 00 01 00 C1 02 10 00 C2 02 03 01 C0 01 0A 报文结束…...

编程日记 2023/9/21 23:06:47

一、python解题——求序列最长递增

解题代码&#xff1a; import os import sys# 请在此输入您的代码 n int(input()) a list(map(int, input().split())) # 创建一个初始元素全为1的列表&#xff0c;用来存放每个递增序列的长度 b [1 for x in range(0, n)] # 设置num&#xff0c;用来控制b列表的下标 num …...

编程日记 2023/9/21 23:04:45

【Java 基础篇】Java线程：volatile关键字与原子操作详解

在多线程编程中&#xff0c;确保线程之间的可见性和数据一致性是非常重要的。Java中提供了volatile关键字和原子操作机制&#xff0c;用于解决这些问题。本文将深入讨论volatile关键字和原子操作的用法&#xff0c;以及它们在多线程编程中的重要性和注意事项。 volatile关键字…...

编程日记 2023/9/21 23:03:44

992. K 个不同整数的子数组

992. K 个不同整数的子数组 给定一个正整数数组 nums和一个整数 k&#xff0c;返回 nums 中 「好子数组」 的数目。 如果 nums 的某个子数组中不同整数的个数恰好为 k&#xff0c;则称 nums 的这个连续、不一定不同的子数组为 「好子数组 」。 例如&#xff0c;[1,2,3,1,2] 中…...

编程日记 2023/9/21 23:02:43

Vue 使用vue-cli构建SPA项目（超详细）

目录 一、什么是vue-cli 二&#xff0c;构建SPA项目 三、 运行SPA项目 前言&#xff1a; 在我们搭建SPA项目时候&#xff0c;我们必须去检查我们是否搭建好NodeJS环境 cmd窗口输入以下指令&#xff1a;去检查 node -v npm -v 一、什么是vue-cli Vue CLI&#xff08;Vu…...

编程日记 2023/9/21 22:58:38

SpringBoot工程模板

spring脚手架&#xff1a;https://start.spring.io/ <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocati…...

编程日记 2023/9/21 22:57:37

C语言-指针二

一. 指针的操作int main() {int a 10 , b 20, c 30;int *p NULL, *q NULL;p &a;//对指针变量p本身进行修改b *p;//*p为右值表示对变量a的读取*p 60;//*p为左值表示通过指向的内存空间对变量a的写入p &c;//p指向的内存空间发生变化b *p;//对c的读取操作*p 70…...

编程新知 2026/5/12 21:16:00

计算机视觉模型选型实战：四维战场决策法

1. 项目概述&#xff1a;这不是一场技术选型&#xff0c;而是一次实战能力的现场测验 “计算机视觉的战场&#xff1a;选择你的冠军”——这个标题乍看像游戏海报&#xff0c;实则精准戳中了当前CV工程落地最真实的痛点。它不谈论文指标、不堆模型参数&#xff0c;而是把镜头直…...

编程新知 2026/5/12 20:22:27

云端AI模型基准测试：从参数迷信到效能优先的选型实战

1. 项目概述&#xff1a;一次颠覆认知的云端AI模型基准测试作为一名长期在本地部署AI智能体&#xff08;我用的是OpenClaw&#xff09;的实践者&#xff0c;模型选型一直是我工作流中的核心决策。过去几个月&#xff0c;我默认使用的都是阿里云出品的qwen3.5:397b-cloud。这个模…...

编程新知 2026/5/12 20:15:58

如何突破窗口限制：3分钟掌握WindowResizer强制调整技巧

如何突破窗口限制&#xff1a;3分钟掌握WindowResizer强制调整技巧 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer 还在为那些无法拖拽大小的应用程序窗口而烦恼吗&#xff1f;Win…...

编程新知 2026/5/12 20:03:20

NomNom终极指南：3个技巧让你轻松掌控《无人深空》存档

NomNom终极指南&#xff1a;3个技巧让你轻松掌控《无人深空》存档 【免费下载链接】NomNom NomNom is the most complete savegame editor for NMS but also shows additional information around the data youre about to change. You can also easily look up each item indi…...

编程新知 2026/5/12 18:46:14

Java十道高频面试题（一）

Java基础与集合1. HashMap的底层数据结构是什么&#xff1f;&#xff08;JDK 1.7 vs 1.8&#xff09;考察点&#xff1a;数据结构演进、哈希冲突解决、扩容死循环问题。参考答案&#xff1a;HashMap在JDK 1.7和1.8中有着本质的区别&#xff0c;主要体现在底层结构和扩容机制上&…...

编程新知 2026/5/12 17:35:04

如何在浏览器中重新解锁微信网页版？一款开源插件为你提供完美解决方案

如何在浏览器中重新解锁微信网页版&#xff1f;一款开源插件为你提供完美解决方案 【免费下载链接】wechat-need-web 让微信网页版可用 / Allow the use of WeChat via webpage access 项目地址: https://gitcode.com/gh_mirrors/we/wechat-need-web 还在为微信网页版无…...

编程新知 2026/5/12 17:12:51

别再只跟 AI 聊天了，教它干活才是正经事

摘要大模型只会聊天&#xff1f;那你可能用错了方式。函数调用让 AI 从"说"变成"做"&#xff0c;能真正执行任务。本文分享我搭建 AI Agent 的实战经验&#xff0c;包括工具设计、参数校验、错误处理等核心环节&#xff0c;帮你避开那些我踩过的坑。开篇引…...

编程新知 2026/5/12 15:37:31

寄生电感容易被忽略，却是电路不稳定的隐形元凶

调试电路板的时候&#xff0c;最让人抓狂的并不是那些明面上能查到文档的参数问题。示波器一抓波形&#xff0c;明明电源电压已经稳定&#xff0c;负载也没动&#xff0c;可偏偏就是有那种挥之不去的毛刺&#xff0c;幅度不大&#xff0c;频率不低&#xff0c;排查了半天才发现…...

编程新知 2026/5/12 15:11:52

SRWE终极窗口管理指南：免费解锁Windows窗口任意调整能力

SRWE终极窗口管理指南&#xff1a;免费解锁Windows窗口任意调整能力 【免费下载链接】SRWE Simple Runtime Window Editor 项目地址: https://gitcode.com/gh_mirrors/sr/SRWE 你是否曾为Windows窗口管理的限制感到困扰&#xff1f;想要调整游戏窗口大小进行高清截图&am…...

编程新知 2026/5/12 14:11:56