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

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

news 2026/3/27 9:15:41

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

        - 通过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

别再滥用Tick了！UE5里Cast To的正确打开方式与性能实测

UE5性能优化实战&#xff1a;Tick事件中Cast To的高效替代方案 在虚幻引擎5的项目开发中&#xff0c;性能优化往往隐藏在那些看似无害的日常操作里。Tick事件中的Cast To操作就像房间里的大象——人人都知道它存在&#xff0c;却常常低估它的影响。当项目规模扩大、逻辑复杂度提…...

编程新知 2026/3/27 8:30:32

魔兽世界API开发助手：从新手到专家的全流程解决方案

魔兽世界API开发助手&#xff1a;从新手到专家的全流程解决方案 【免费下载链接】wow_api Documents of wow API -- 魔兽世界API资料以及宏工具 项目地址: https://gitcode.com/gh_mirrors/wo/wow_api 价值定位&#xff1a;如何避免90%的插件开发陷阱&#xff1f; 在魔…...

编程新知 2026/3/27 7:48:15

nli-distilroberta-base实际项目：高校招生简章关键条款与考生疑问逻辑关系库构建

nli-distilroberta-base实际项目&#xff1a;高校招生简章关键条款与考生疑问逻辑关系库构建 1. 项目背景与需求 高校招生简章通常包含大量专业条款和政策说明&#xff0c;每年都会收到大量考生关于条款理解的咨询。传统的人工解答方式存在几个痛点&#xff1a; 效率低下&am…...

编程新知 2026/3/27 7:44:15

PyTorch 2.8镜像多场景落地：智慧农业病虫害识别模型田间部署方案

PyTorch 2.8镜像多场景落地&#xff1a;智慧农业病虫害识别模型田间部署方案 1. 田间AI的迫切需求 现代农业正面临病虫害防治的严峻挑战。传统人工巡查方式效率低下&#xff0c;一个熟练的技术员每天最多能检查3-5亩作物&#xff0c;而大型农场往往需要数十人同时作业。更棘手…...

编程新知 2026/3/27 6:29:16

Obsidian移动端深度评测：安卓/iOS同步技巧+5个必装生产力插件

Obsidian移动端深度评测&#xff1a;安卓/iOS同步技巧5个必装生产力插件 在移动办公场景下&#xff0c;Obsidian作为一款强大的知识管理工具&#xff0c;其跨平台能力与插件生态为商务人士和学生群体提供了独特的价值。本文将深入解析Obsidian在Android和iOS平台的核心差异&…...

编程新知 2026/3/27 6:09:01

RK3128安卓5.1系统APK签名全流程：从signapk.jar到platform.pk8的保姆级教程

RK3128安卓5.1系统APK签名实战指南&#xff1a;工具获取与问题排查全解析 在嵌入式Android开发领域&#xff0c;RK3128芯片因其性价比优势被广泛应用于各类智能终端设备。当开发者需要为这类设备定制系统应用或预装APK时&#xff0c;掌握正确的签名方法至关重要。不同于普通And…...

编程新知 2026/3/27 4:15:48

如何快速解锁原神60帧限制：免费开源工具终极指南

如何快速解锁原神60帧限制&#xff1a;免费开源工具终极指南 【免费下载链接】genshin-fps-unlock unlocks the 60 fps cap 项目地址: https://gitcode.com/gh_mirrors/ge/genshin-fps-unlock 想要在《原神》中体验120帧甚至更高帧率的流畅游戏画面吗&#xff1f;genshi…...

编程新知 2026/3/27 4:03:39

解锁新可能：ArkData 在智能穿戴设备中的应用

解锁新可能&#xff1a;ArkData 在智能穿戴设备中的应用随着人们对健康生活的重视&#xff0c;智能穿戴设备愈发普及。这些设备能够实时收集心率、步数、睡眠等健康数据&#xff0c;为人们的健康管理提供重要参考。在这一背景下&#xff0c;如何高效管理和利用这些健康数据成为…...

编程新知 2026/3/27 3:19:04

深度解析ConcurrentHashMap设计演进：从分段锁到无锁化的并发之路

在Java并发编程领域&#xff0c;ConcurrentHashMap绝对是“并发容器扛鼎之作”——它既解决了HashMap并发环境下的数据不一致&#xff08;死循环、数据丢失&#xff09;问题&#xff0c;又突破了Hashtable全表锁的性能瓶颈&#xff0c;成为高并发场景下K-V存储的首选。自JDK1.5…...

编程新知 2026/3/27 2:54:47

OpenClaw任务编排：GLM-4.7-Flash复杂流程设计

OpenClaw任务编排&#xff1a;GLM-4.7-Flash复杂流程设计 1. 为什么需要任务编排 去年我接手了一个市场分析项目&#xff0c;需要每周手动收集竞品动态并生成报告。重复性的复制粘贴和格式调整消耗了大量时间&#xff0c;直到发现OpenClaw可以通过编排GLM-4.7-Flash模型实现全…...

编程新知 2026/3/27 2:12:41