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

CSS中的定位

news 2026/2/10 0:03:22

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

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2026/1/31 4:26:17

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2026/1/31 4:37:53

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2026/1/26 13:35:42

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2026/1/30 2:34:31

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

编程新知 2026/2/9 13:47:57

Qt的学习(一)

1.什么是Qt Qt特指用来进行桌面应用开发&#xff08;电脑上写的程序&#xff09;涉及到的一套技术Qt无法开发网页前端&#xff0c;也不能开发移动应用。 客户端开发的重要任务&#xff1a;编写和用户交互的界面。一般来说和用户交互的界面&#xff0c;有两种典型风格&…...

编程新知 2026/2/8 18:10:17