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

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

news 文章来源：https://blog.csdn.net/csgojingyu/article/details/135138654 2024/9/20 3:04:15

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

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

20231222给NanoPC-T4(RK3399)开发板的适配Android11的挖掘机方案并跑通AP6398SV

20231222给NanoPC-T4(RK3399)开发板的适配Android11的挖掘机方案并跑通AP6398SV 2023/12/22 7:54 简略步骤&#xff1a;rootrootrootroot-X99-Turbo:~/3TB$ cat Android11.0.tar.bz2.a* > Android11.0.tar.bz2 rootrootrootroot-X99-Turbo:~/3TB$ tar jxvf Android11.0.tar.…...

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

iClient for JavaScript如何以mvt矢量瓦片的形式加载数据服务

刘大 这里写目录标题 前言1.iServer中的预览页面2.iClient for JavaScript加载2.1 构建Style2.2 iCient加载2.2.1Leaflet & MapboxGL2.2.2 OpenLayers 前言 在提到查看iServer REST数据服务的概况的时候&#xff0c;大家总会想到说&#xff0c;通过发布对应的地图服务或者…...

编程日记 2023/12/26 21:13:24

全方位掌握卷积神经网络：理解原理 优化实践应用

计算机视觉CV的发展 检测任务 分类与检索 超分辨率重构 医学任务 无人驾驶 整体网络架构 卷积层和激活函数&#xff08;ReLU&#xff09;的组合是网络的核心组成部分 激活函数(ReLU&#xff09; 引入非线性&#xff0c;增强网络的表达能力。 卷积层 负责特征提取 池化层…...

编程日记 2023/12/26 21:12:22

视频批量处理：随机分割方法，创新剪辑方式

随着数字媒体技术的飞速发展&#xff0c;视频处理已是日常生活和工作中不可或缺的一部分。在处理大量视频时&#xff0c;要一种高效、自动化的方法来满足需求。现在一起来看云炫AI智剪如何批量随机分割视频的批量处理方法&#xff0c;给视频剪辑工作带来创新。 视频随机分割4段…...

编程日记 2023/12/26 21:08:19

Gaussian-Splatting 训练并导入Unity中

这个周末玩点啥~&#x1f41e; &#x1f365;环境安装&#x1f4a1;安装C编译工具&#x1f4a1;安装Python&#x1f4a1;安装CUDA&#x1f4a1;添加ffmpeg到环境变量Path添加COLMAP-3.8-windows-cuda文件路径到环境变量Path&#x1f4a1;pytorch安装&#x1f4a1;tqdm 安装&…...

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

账号和权限管理

目录 一、用户账号和的概述 &#xff08;一&#xff09;用户类别 &#xff08;二&#xff09;组账号 ​编辑&#xff08;三&#xff09;UID号 ​编辑&#xff08;四&#xff09;GID号 &#xff08;五&#xff09;配置文件 二、用户账号管理 &#xff08;一&#xff09;…...

编程日记 2023/12/26 21:05:14

前端---表单标签

1. 表单的介绍 表单用于搜集不同类型的用户输入(用户输入的数据)&#xff0c;然后可以把用户数据提交到web服务器 。 2. 表单相关标签的使用 <form>标签 表示表单标签&#xff0c;定义整体的表单区域 <label>标签 表示表单元素的文字标注标签&#xff0c;定义文字…...

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

Matplotlib 绘制基本的图表

# 导入包 import pandas as pd import numpy as np import matplotlib.pyplot as plt plt.rcParams[font.sans-serif][SimHei] # 用来显示中文 plt.rcParams[axes.unicode_minus] False # 显示负坐标轴# 读取源数据&#xff0c;后续大部分数据基于词文件的数据&#xff0c;需…...

编程日记 2023/12/26 20:59:08

【JavaScript】异步解决方案的发展历程

✨ 专栏介绍 在现代Web开发中&#xff0c;JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性&#xff0c;还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言&#xff0c;JavaScript具有广泛的应用场景&#x…...

编程日记 2023/12/26 20:55:05

前端性能优化三十四：花裤衩模板引入打包分析工具

测量各个插件和loader所花费的时间 (1). install: yarn add speed-measure-webpack-plugin -D(2). Vue-cli 3.x设置: const SpeedMeasurePlugin require(speed-measure-webpack-plugin) const smp new SpeedMeasurePlugin({outputFormat: human }) // 包裹configureWebpac…...

编程日记 2023/12/26 20:52:02

求职小程序列表基础配置-移动端通用列表模块配置教程(1)

求职小程序列表基础配置-移动端通用列表模块配置教程(1) 移动端通用列表页开发指南 准备工作 注册多八多AIIDE账号: 访问多八多AIIDE官网并注册新账号。完成邮箱和手机号的验证。 创建移动应用: 登录后&#xff0c;在工作台新建一个移动应用。填写应用名称&#xff0c;选择“…...

编程日记 2023/12/26 20:49:59

牛客设计模式

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;…...

编程日记 2023/12/26 20:46:56

从零构建tomcat环境

一、官网构建 1.1 下载 一般来说对于开源软件都有自己的官方网站&#xff0c;并且会附上使用文档以及一些特性和二次构建的方法&#xff0c;那么我们首先的话需要从官网或者tomcat上下载到我们需要的源码包。下载地址&#xff1a;官网、Github。 这里需要声明一下&#xff…...

编程日记 2023/12/26 20:45:55

MySQL递归公用表表达式

&#x1f607;作者介绍&#xff1a;一个有梦想、有理想、有目标的&#xff0c;且渴望能够学有所成的追梦人。 &#x1f386;学习格言&#xff1a;不读书的人,思想就会停止。——狄德罗 ⛪️个人主页&#xff1a;进入博主主页 &#x1f5fc;专栏系列&#xff1a;MySQL知识 &…...

编程日记 2023/12/26 20:42:53

深入 K8s 网络原理（一）- Flannel VXLAN 模式分析

1. 概述 这周集中聊下 K8s 的集群网络原理&#xff0c;我初步考虑分成3个方向&#xff1a; Pod-to-Pod 通信&#xff08;同节点 or 跨节点&#xff09;&#xff0c;以 Flannel VXLAN 模式为例&#xff1b; Pod/External-to-Service 通信&#xff0c;以 iptables 实现为例&…...

编程日记 2023/12/26 20:39:51

fpga 8段4位数码管verilator模拟

8段4位数码管verilator模拟 seg.v module seg(input wire clk,input wire rst_n,output wire[7:0] SEG,output wire[3:0] SEL );reg[7:0] digit[0:15] {8h3f, 8h06, 8h5b, 8h4f, 8h66, 8h6d, 8h7d,8h07,8h7f,8h6f, 8h77, 8h7c, 8h39, 8h5e, 8h79, 8h71};reg[31:0] cnt 32…...

编程日记 2023/12/26 20:38:50

HttpURLConnection发送各种内容格式

通过java.net.HttpURLConnection类实现http post发送Content-Type为multipart/form-data的请求。 json处理使用com.fasterxml.jackson 图片压缩使用net.coobird.thumbnailator log使用org.slf4j 一些静态变量 private static final Charset charset StandardCharsets.UTF_8;…...

编程日记 2023/12/26 20:35:46

摇杆控制人物移动

摇杆控制人物移动 一、UI搭建二、3d模型搭建三、脚本JoyStickBar.csPlayerController.cs 工程在我资源里名字叫Joystickbar.unitypackage [连接](https://download.csdn.net/download/qq_42194657/12043019?spm1001.2014.3001.5503) 一、UI搭建 JoyStickBar是图片背景 JoySt…...

编程日记 2023/12/26 20:34:45

Jenkins自动化部署之后端

准备工作参考本人另外几篇Jenkins相关的文章 新建任务 添加参数配置 字符串参数&#xff1a;分支名称 多选框&#xff1a;项目名称&#xff08;Extended Choice Parameter插件必备&#xff0c;插件安装参考我另外的文章&#xff09; 这个分割规则自定义。只要根据Jenkins…...

编程日记 2023/12/26 20:32:43

Could not resolve com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.28.

1、首先进入阿里云maven仓库&#xff0c;在搜索栏输入无法下载的依赖名称&#xff0c;查询现有版本号&#xff0c;可以看到这里有2.9.34。 2、在build.gradle(Project)的buildscript闭包下替换为阿里云maven仓库&#xff1a; maven { url https://www.jitpack.io } maven { u…...

编程日记 2023/12/26 20:28:39

RK3588平台开发系列讲解（AI 篇）RKNN rknn_query函数详细说明

文章目录 一、查询 SDK 版本二、查询输入输出 tensor 个数三、查询输入 tensor 属性(用于通用 API 接口)四、查询输出 tensor 属性(用于通用 API 接口)五、查询模型推理的逐层耗时六、查询模型推理的总耗时七、查询模型的内存占用情况八、查询模型里用户自定义字符串九、查询原…...

编程日记 2023/12/26 20:27:38

15个主流设计灵感网站，激发你的创作灵感！

即时设计 即时设计是一种强大的云设计工具&#xff0c;已成为许多设计师、产品经理和开发人员的首选工具之一。即时设计用户可以使用内置的工具和功能快速创建和编辑设计&#xff0c;或与其他用户共享和合作。此外&#xff0c;即时设计还有一个丰富的资源社区&#xff0c;为用…...

编程日记 2023/12/26 20:23:33

Matlab：解非线性方程组

1、基于问题求解非线性方程组 例&#xff1a; xoptimvar(x,2); %将x定义为一个二元素优化变量 eq1exp(-exp(-(x(1)x(2))))x(2)*(1x(1)^2); %创建第一个方程作为优化等式表达式 eq2x(1)*cos(x(2))x(2)*sin(x(1))1/2; %创建第二个方程作为优化等式表达式 probe…...

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

面向 AI，重塑云基础设施、存储、芯片、Serverless……2023亚马逊云科技re:Invent中国行

一年一度亚马逊云科技重要的技术盛会 re:Invent 刚落下帷幕&#xff0c;2023 亚马逊云科技 re:Invent 中国行就将其中重要的信息与内容带给了中国市场和用户。作为全球的云计算巨头&#xff0c;今年亚马逊云科技可以说全面加码 AI&#xff0c;例如发布完整的端到端生成式 AI 技…...

编程日记 2023/12/26 20:19:30

【JDK新特性】JDK和Springboot各版本新特性介绍

目录 参考资料 以下是一些较新版本的JDK的主要新特性介绍&#xff1a; JDK 8&#xff1a; Lambda 表达式&#xff1a;引入了函数式编程的概念&#xff0c;使得代码更简洁、可读性更强。Stream API&#xff1a;提供了一种高效处理集合数据的方式&#xff0c;支持并行处理。默认…...

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

tomcat剖析：开篇

一、简介 本专栏为解析tomcat的专栏&#xff0c;用于一步步的从构建到执行&#xff0c;再到剖析tomcat的内部构造&#xff0c;然后再加上自己的理解&#xff0c;从0到1去认识我们日常开发中不可或缺的web容器&#xff0c;希望对之后的软件设计能够有所启示。 二、步骤 2.1构…...

编程日记 2023/12/26 20:16:27

华为路由器：DHCP配置

在大型企业网络中&#xff0c;会有大量的主机获取IP地址等网络参数。如果采用手工配置&#xff0c;则工作量大不好管理&#xff0c;若用户擅自更改网络参数&#xff0c;则容易导致IP冲突。 因此使用动态主机配置协议&#xff08;DHCP&#xff09;可以减少管理员的工作量&#x…...

编程日记 2023/12/26 20:14:26

（企业 / 公司项目）微服务OpenFeign怎么实现服务间调用？（含面试题）

Feign: 远程调用组件使用步骤&#xff0c;理解上面的图  后台系统中, 微服务和微服务之间的调用可以通过Feign组件来完成.  Feign组件集成了Ribbon负载均衡策略(默认开启的, 使用轮询机制),Hystrix熔断器 (默认关闭的, 需要通过配置文件进行设置开启)  被调用的微服务…...

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

数据结构：图文详解 树与二叉树（树与二叉树的概念和性质，存储，遍历）

目录 一.树的概念 二.树中重要的概念 三.二叉树的概念 满二叉树 完全二叉树 四.二叉树的性质 五.二叉树的存储 六.二叉树的遍历 前序遍历 中序遍历 后序遍历 一.树的概念 树是一种非线性数据结构&#xff0c;它由节点和边组成。树的每个节点可以有零个或多个子节点…...

编程日记 2023/12/26 20:09:20

DM工作笔记-在windows下对DM7进行库还原恢复

提供了这些备份数据 在windows平台上&#xff0c;将这些备份数据还原到新库中。 首先实例得先停掉&#xff1a; 使用的软件console.exe&#xff1a; 重要步骤&#xff1a;①获取备份&#xff1b;②还原&#xff1b;③恢复 记住DMAP方式这个不要勾选&#xff0c;然后再获取备份…...

编程日记 2023/12/26 20:07:18