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

CSS中的定位

news 2026/2/8 9:46:20

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

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

MMaDA: Multimodal Large Diffusion Language Models

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

编程新知 2026/2/3 15:24:36

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

编程新知 2026/1/30 17:24:20

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/11/25 19:50:27

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

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

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

编程新知 2026/1/20 12:20:43

恶补电源：1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

编程新知 2026/1/29 8:28:23