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

CSS中的定位

news 2025/11/30 22:42:37

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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/11/30 1:33:56

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/11/30 8:17:23

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/10/23 18:29:35

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/11/27 12:19:41

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/11/30 18:10:17

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/11/29 8:57:49

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/11/18 8:59:32

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/11/18 8:57:16

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05