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

CSS中更加高级的布局手段——定位之绝对定位

news 2026/3/27 11:17:34

定位：
        - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素

        - 通过position属性来设置元素的定位

                -可选值：

                        static： ['stætik] 默认值，元素没有开启定位

                        relative： ['relətiv] 开启元素的相对定位

                        absolute： ['æbsəlju:t] 开启元素的绝对定位

                        fixed：开启元素的固定定位（也是绝对定位的一种）

                        sticky： ['stiki] 开启元素的粘滞定位

当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位：

        1.开启绝对定位，会使元素脱离文档流

        2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

        3.绝对定位是相对于离他最近的包含块定位的

        （一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）

        4.绝对定位会使元素提升一个层级

        5.绝对定位会改变元素的性质，开启BFC属性，内联元素变成行内块元素，块元素的宽度和高度默认都被内容撑开

包含块：containing block

        -正常情况下：离当前元素最近的祖先块元素

        -定位情况下：离他最近的开启了定位的祖先元素

        如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位，html （根元素，初始包含块）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 200px;height: 200px;background-color: yellow;position: absolute;	left: 0px;top: 0px;bottom:0px}.box3{width: 200px;height: 200px;background-color: yellowgreen;}.inner{width: 300px;height: 300px;background-color: orange;/*开启inner的相对定位*/position: relative;}.outer{width: 400px;height: 400px;background-color: #ccc;/*开启outer的相对定位*//* position: relative; */}.s1{/* width: 100px;height: 100px; */background-color: pink;/*开启绝对定位*//* position: absolute; */}</style></head><body><div class="box1"></div><div class="outer"><div class="inner"><div class="box2"></div></div></div><div class="box3"></div><span class="s1">我是一个span</span></body>
</html>

相关文章：

CSS中更加高级的布局手段——定位之绝对定位

定位&#xff1a; - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素 - 通过position属性来设置元素的定位 -可选值&#xff1a; static&#xff1a; [sttik] 默认值&#xff0c;元素没有开启定位 relative&#xff1a; [relətiv] 开启元素…...

编程日记 2023/12/26 22:07:10

SQL server 数据库练习题及答案（练习3）

一、编程题 公司部门表 department 字段名称 数据类型 约束等 字段描述 id int 主键&#xff0c;自增 部门ID name varchar(32) 非空&#xff0c;唯一 部门名称 description varchar(1024) …...

编程日记 2023/12/26 22:06:09

太绝了！这个食堂服务，戳中了打工人的心巴！

在当今数字化时代&#xff0c;科技的迅猛发展已经渗透到我们生活的方方面面&#xff0c;其中餐饮行业也不例外。食堂作为人们日常生活中不可或缺的一部分&#xff0c;其管理和运营也需要紧跟科技潮流。 智慧收银系统的引入&#xff0c;旨在提高食堂的效率、准确性和服务水平&am…...

编程日记 2023/12/26 22:04:07

围栏中心点

后端返回的数据格式是 [{height: 0,lat: 30.864277169098443,lng:114.35252972024682}{height: 1,lat: 30.864277169098443,lng:114.35252972024682}.........]我们要转换成 33.00494857612568,112.53886564762979;33.00307854503083,112.53728973842954;33.00170296814311,11…...

编程日记 2023/12/26 22:02:05

【go-zero】simple-admin框架 整合ent mysql批量插入 | ent批量插入mysql

一、完整流程 我们需要通过goctls快速生成一个RPC项目 【go-zero】simple-admin 开篇：进击 go-zero 二开框架 simple-admin 加速 go-zero 开发 之 rpc项目快速创建（更新中~） https://ctraplatform.blog.csdn.net/article/details/130087729 1、RPC项目 1.1、.proto synta…...

编程日记 2023/12/26 22:01:04

漏洞复现-泛微OA xmlrpcServlet接口任意文件读取漏洞（附漏洞检测脚本）

免责声明 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…...

编程日记 2023/12/26 21:59:02

Flink CDC 1.0至3.0回忆录

Flink CDC 1.0至3.0回忆录 一、引言二、CDC概述三、Flink CDC 1.0&#xff1a;扬帆起航3.1 架构设计3.2 版本痛点 四、Flink CDC 2.0&#xff1a;成长突破4.1 DBlog 无锁算法4.2 FLIP-27 架构实现4.3 整体流程 五、Flink CDC 3.0&#xff1a;应运而生六、Flink CDC 的影响和价值…...

编程日记 2023/12/26 21:57:01

c语言例题7

以下程序中&#xff0c;主函数调用了LineMax函数&#xff0c;实现在N行M列的二维数组中&#xff0c;找出每一行上的最大值。请填空。 #define N 3 #define M 4 void LineMax(int x[N][M]) { int i,j,p; for(i0; i<N;i) { p0; for(j1; j<M;j) …...

编程日记 2023/12/26 21:54:59

【Linux驱动】最基本的驱动框架 | LED驱动

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《Linux驱动》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 目录 &#x1f3c0;最基本的驱动框架⚽驱动程序框架⚽编程 &#x1f3c0;LED驱动⚽配置GPIO⚽编程…...

编程日记 2023/12/26 21:53:58

前端---表单提交

1. 表单属性设置 <form>标签 表示表单标签&#xff0c;定义整体的表单区域 action属性 设置表单数据提交地址method属性 设置表单提交的方式&#xff0c;一般有“GET”方式和“POST”方式, 不区分大小写 2. 表单元素属性设置 name属性 设置表单元素的名称&#xff0c…...

编程日记 2023/12/26 21:51:57

[C#]Parallel使用

一、 Parallel的使用 1、Parallel.Invoke2、Parallel.For3、Parallel.Foreach二、 Parallel中途退出循环和异常处理 1、当我们使用到Parallel&#xff0c;必然是处理一些比较耗时的操作&#xff0c;当然也很耗CPU和内存&#xff0c;如果我们中途向停止&#xff0c;怎么办呢&…...

编程日记 2023/12/26 21:50:56

docker container 指定gpu设备

1&#xff0c; 在yaml中 Turn on GPU access with Docker Compose | Docker Docs Example of a Compose file for running a service with access to 1 GPU device: services:test:image: nvidia/cuda:12.3.1-base-ubuntu20.04command: nvidia-smideploy:resources:reserva…...

编程日记 2023/12/26 21:48:54

时间Date

你有没有思考过时间问题&#xff1a; 前端为什么可以直接看见时间格式的数据 后端怎么接受的数据&#xff0c;怎么处理的 一般来说&#xff1a;前端传输来数据都是时间格式的字符串&#xff0c;那么后端需要能够解析时间格式的字符串&#xff0c;归功于JSONFormat ,可以解析…...

编程日记 2023/12/26 21:45:51

前端---css 选择器

1. css 选择器的定义 css 选择器是用来选择标签的&#xff0c;选出来以后给标签加样式。 2. css 选择器的种类 标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器 3. 标签选择器 根据标签来选择标签&#xff0c;以标签开头&#xff0c;此种选择器影响范…...

编程日记 2023/12/26 21:39:46

【MybatisPlus快速入门】(2)SpringBoot整合MybatisPlus 之 标准数据层开发 代码示例

目录 1 标准CRUD使用2 新增3 删除4 修改5 根据ID查询6 查询所有7 MyBatis-Plus CRUD总结 之前我们已学习MyBatisPlus在代码示例与MyBatisPlus的简介&#xff0c;在这一节中我们重点学习的是数据层标准的CRUD(增删改查)的实现与分页功能。代码比较多&#xff0c;我们一个个来学习…...

编程日记 2023/12/26 21:33:41

如何将自建的ElasticSearch注册成一个服务

ES 服务管理 注册ES服务 创建一个 Elasticsearch 服务配置文件。 ​ sudo vim /etc/systemd/system/elasticsearch.service 将以下内容复制到 elasticsearch.service 文件中&#xff1a; [Unit] Descriptionelasticsearch Afternetwork.target[Service] Typeforking Useresa…...

编程日记 2023/12/26 21:32:40

360勒索病毒：了解最新变种.360，以及如何保护您的数据

导言&#xff1a; 随着科技的飞速发展&#xff0c;网络安全威胁也在不断演变&#xff0c;.360 勒索病毒成为近期备受关注的一种恶意软件。本文91数据恢复将介绍如何恢复被.360 勒索病毒加密的数据文件&#xff0c;并提供一些建议&#xff0c;帮助你预防这种威胁。 如果您在面对…...

编程日记 2023/12/26 21:30:39

vue使用ElementUI搭建精美页面入门

ElementUI简直是css学得不好的同学的福音 ElementUI官网&#xff1a; Element - The worlds most popular Vue UI framework 安装 在vue文件下&#xff0c;用这个命令去安装Element UI。 npm i element-ui -S step1\先切换到vue的目录下去&#xff0c;注意这里面的WARN不是…...

编程日记 2023/12/26 21:27:36

【C-＞Cpp】深度解析#由C迈向Cpp（2）

目录 &#xff08;一&#xff09;缺省参数 全缺省参数 半缺省参数 缺省参数只能在函数的声明中出现&#xff1a; 小结&#xff1a; &#xff08;二&#xff09;函数重载 函数重载的定义 三种重载 在上一篇中&#xff0c;我们从第一个Cpp程序为切入&#xff0c;讲解了Cpp的…...

编程日记 2023/12/26 21:20:31

WPS中如何根据身份证号生成出生日期并排序

1. wps中如何根据身份证号导出出生日期并排序 1.1 wps中建一张表 1.2 使用转日期格式导出出生日期 DATE(VALUE(MID(C2,7,4)),VALUE(MID(C2,11,2)),VALUE(MID(C2,13,2)))MID(C2, 7, 4)&#xff1a;这部分从单元格 C2 中提取文本字符串&#xff0c;从第7个字符开始提取长度为4的…...

编程日记 2023/12/26 21:18:29

Python调用SM9国密库为何慢？揭秘OpenSSL 3.0+与gmssl 3.2.1在ECC双线性对运算中的3层性能断点

第一章&#xff1a;Python调用SM9国密库性能瓶颈的全局观测在实际政务系统与金融信创项目中&#xff0c;Python通过ctypes或CFFI方式调用国产SM9算法C语言实现&#xff08;如GMSSL或OpenSSL国密分支&#xff09;时&#xff0c;常出现显著的吞吐量下降与高延迟抖动。这种性能退化…...

编程新知 2026/3/27 11:13:57

嵌入式系统的启动流程与初始化详解

嵌入式系统的启动流程与初始化详解 为什么启动流程如此重要 作为科技创业者&#xff0c;我深知在嵌入式产品开发中&#xff0c;启动流程的设计和优化直接影响产品的用户体验和可靠性。一个快速、稳定的启动流程不仅能提升产品的竞争力&#xff0c;还能减少客户的等待时间&#…...

编程新知 2026/3/27 10:41:48

保姆级教程：用命令行实时监控瑞芯微RK3588的CPU/GPU/NPU负载与温度

嵌入式开发实战&#xff1a;构建RK3588芯片全维度性能监控系统 在边缘计算和AI推理场景中&#xff0c;RK3588作为一款高性能SoC&#xff0c;其复杂的多核架构&#xff08;包括6核CPU、Mali-G610 GPU和6TOPS NPU&#xff09;对系统监控提出了更高要求。本文将手把手教你搭建一个…...

编程新知 2026/3/27 10:25:43

告别“人工智障”！OpenClaw + 大模型：打造真正能“看懂、想通、干成”的机械臂智能体

写在前面 在机器人圈子里&#xff0c;有个心照不宣的痛点&#xff1a;机械臂越来越便宜&#xff0c;但让它“听话”却越来越难。 传统的示教编程&#xff08;Teaching Pendant&#xff09;太慢&#xff0c;改个产品就得重教一遍&#xff1b;视觉定位&#xff08;Vision Guided&…...

编程新知 2026/3/27 9:51:18

OpenClaw异常处理：配置nanobot自动重试失败任务

OpenClaw异常处理&#xff1a;配置nanobot自动重试失败任务 1. 为什么需要自动重试机制 上周我让OpenClaw执行一个简单的夜间数据收集任务时&#xff0c;遇到了一个令人头疼的问题。凌晨3点&#xff0c;网络突然波动导致任务中断&#xff0c;而当我早上打开电脑时&#xff0c…...

编程新知 2026/3/27 7:30:13

Windows系统卡顿？一招禁用Microsoft Compatibility Telemetry释放CPU资源（附详细截图）

Windows系统卡顿终极解决方案&#xff1a;彻底禁用Microsoft Compatibility Telemetry 最近帮朋友处理一台老笔记本时&#xff0c;遇到了典型的Windows系统卡顿问题——风扇狂转、程序响应迟缓&#xff0c;任务管理器里一个叫"Microsoft Compatibility Telemetry"的进…...

编程新知 2026/3/27 7:18:12

s2-pro语音合成教程：通过API批量提交任务+异步结果回调实现

s2-pro语音合成教程&#xff1a;通过API批量提交任务异步结果回调实现 1. 平台简介 s2-pro是Fish Audio开源的专业级语音合成模型镜像&#xff0c;它能够将文本转换为自然流畅的语音。这个工具特别适合需要批量处理语音合成任务的场景&#xff0c;比如有声书制作、客服语音生…...

编程新知 2026/3/27 5:57:00

6个高效突破内容访问限制的开源工具使用指南

6个高效突破内容访问限制的开源工具使用指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代&#xff0c;优质内容常常被付费墙限制访问。本文将系统介绍基于开源…...

编程新知 2026/3/27 5:36:54

Phi-4-Reasoning-Vision智能助手：医疗影像图文问答系统构建实践

Phi-4-Reasoning-Vision智能助手&#xff1a;医疗影像图文问答系统构建实践 1. 项目概述 Phi-4-Reasoning-Vision是一款基于微软Phi-4-reasoning-vision-15B多模态大模型开发的高性能推理工具&#xff0c;专为医疗影像分析场景优化。该系统能够理解医学影像内容并回答专业问题…...

编程新知 2026/3/27 5:12:43

经典位运算和计算各进制下的各位数字之和

(num & (num - 1)) 是检测2的幂的经典位运算方法&#xff0c;结果为0即为2的幂 if ((num & (num - 1)) ! 0) 按位与&#xff1a; 0 & 0 0 0 & 1 0 1 & 0 0 1 & 1 1 全 1 才 1&#xff0c;有 0 则 0 int lowbit(int x) { …...

编程新知 2026/3/27 4:33:58