对绝对定位、固定定位,以及其层级关系和脱离文档流的影响

2024-01-12 09:18

本文主要是介绍对绝对定位、固定定位,以及其层级关系和脱离文档流的影响,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近去培训问到关于脱离标准层的问题,特意去找了以下相关内容.了解到如下:

定位:一般父级用相对定位,子级用绝对定位

1.相对定位:position:relative

2.绝对定位:position:absolute

3.固定定位:position:fixed

默认static没有定位

偏移量:left和

top比

right和

bottom的优先级要高

相对定位

相对于自身原始位置进行定位

原点在自身左上角

不脱离文档流

特性:

1.不影响元素本身的特性

2.不使元素脱离文档流

3.提升层级

4.无法触发BFC

5.针对自己本身进行定位

绝对定位

以定位父级为原点进行定位

会脱离文档流

如果没有定位父级以document文档定位

温馨提示:绝对定位即使没有初始值,也一定要设置值

left:0px;top:0px;

特性:

1.会使元素完全脱离文档

2.内容撑开宽度和高度

3.使元素支持所有的CSS样式

4.提升层级

5.绝对定位要和相对定位配合使用

6.如果有定位父级,针对定位父级发生偏移

如果没有,针对document进行偏移

7.如果绝对定位的子级有浮动,可以省略清浮动的操作

固定定位

以窗口左上角为原点定位,定位之后相对于窗口的位置始终不变

应用场景:悬浮在网页两边的广告

脱离文档流

温馨提示:IE6不支持固定定位

特性:

1.不兼容IE6

2.针对窗口进行定位

3.如果固定定位的子级有浮动,可以省略清浮动的操作

 

脱离文档流的两点影响

1.后面同父级元素会顶上来

2.父级会检测不到脱离文档流的元素,从而导致父级高度无法由内容撑开

 

 

定位层级设置

z-index:数值

数值越大,层级越高

层级关系

z-index负数<正常<float(和文档同级)<position<z-index正数

注意:z-index、left、top、right、bottom只对带有position属性(static除外)的元素有效

z-index,用来提升或降低层级关系

这篇关于对绝对定位、固定定位,以及其层级关系和脱离文档流的影响的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/597394

相关文章

Python Pillow 库详解文档(最新推荐)

《PythonPillow库详解文档(最新推荐)》Pillow是Python中最流行的图像处理库,它是PythonImagingLibrary(PIL)的现代分支和继承者,本文给大家介绍Pytho... 目录python Pillow 库详解文档简介安装核心模块架构Image 模块 - 核心图像处理基本导入

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性,由Chrome125开始提供原生支持需... 目录 css Anchor Positioning:重新定义「锚定定位」的时代来了! 什么是 Anchor Pos

C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式

《C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式》Markdown凭借简洁的语法、优良的可读性,以及对版本控制系统的高度兼容性,逐渐成为最受欢迎的文档格式... 目录为什么要将文档转换为 Markdown 格式使用工具将 Word 文档转换为 Markdown(.

详解如何使用Python构建从数据到文档的自动化工作流

《详解如何使用Python构建从数据到文档的自动化工作流》这篇文章将通过真实工作场景拆解,为大家展示如何用Python构建自动化工作流,让工具代替人力完成这些数字苦力活,感兴趣的小伙伴可以跟随小编一起... 目录一、Excel处理:从数据搬运工到智能分析师二、PDF处理:文档工厂的智能生产线三、邮件自动化:

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

Maven项目中集成数据库文档生成工具的操作步骤

《Maven项目中集成数据库文档生成工具的操作步骤》在Maven项目中,可以通过集成数据库文档生成工具来自动生成数据库文档,本文为大家整理了使用screw-maven-plugin(推荐)的完... 目录1. 添加插件配置到 pom.XML2. 配置数据库信息3. 执行生成命令4. 高级配置选项5. 注意事

Python使用python-docx实现自动化处理Word文档

《Python使用python-docx实现自动化处理Word文档》这篇文章主要为大家展示了Python如何通过代码实现段落样式复制,HTML表格转Word表格以及动态生成可定制化模板的功能,感兴趣的... 目录一、引言二、核心功能模块解析1. 段落样式与图片复制2. html表格转Word表格3. 模板生

浅谈Redis Key 命名规范文档

《浅谈RedisKey命名规范文档》本文介绍了Redis键名命名规范,包括命名格式、具体规范、数据类型扩展命名、时间敏感型键名、规范总结以及实际应用示例,感兴趣的可以了解一下... 目录1. 命名格式格式模板:示例:2. 具体规范2.1 小写命名2.2 使用冒号分隔层级2.3 标识符命名3. 数据类型扩展命

Java的"伪泛型"变"真泛型"后对性能的影响

《Java的伪泛型变真泛型后对性能的影响》泛型擦除本质上就是擦除与泛型相关的一切信息,例如参数化类型、类型变量等,Javac还将在需要时进行类型检查及强制类型转换,甚至在必要时会合成桥方法,这篇文章主... 目录1、真假泛型2、性能影响泛型存在于Java源代码中,在编译为字节码文件之前都会进行泛型擦除(ty

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取