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

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

news 2026/2/9 3:40:50

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

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

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2026/1/23 12:16:56

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2026/2/1 13:41:09

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2026/1/26 8:13:33