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

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

相关文章

线上Java OOM问题定位与解决方案超详细解析

《线上JavaOOM问题定位与解决方案超详细解析》OOM是JVM抛出的错误,表示内存分配失败,:本文主要介绍线上JavaOOM问题定位与解决方案的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录一、OOM问题核心认知1.1 OOM定义与技术定位1.2 OOM常见类型及技术特征二、OOM问题定位工具

C#实现一键批量合并PDF文档

《C#实现一键批量合并PDF文档》这篇文章主要为大家详细介绍了如何使用C#实现一键批量合并PDF文档功能,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言效果展示功能实现1、添加文件2、文件分组(书签)3、定义页码范围4、自定义显示5、定义页面尺寸6、PDF批量合并7、其他方法

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java:高效Word文档处理的利器代码实战:使用Java为Wo

使用Python实现Word文档的自动化对比方案

《使用Python实现Word文档的自动化对比方案》我们经常需要比较两个Word文档的版本差异,无论是合同修订、论文修改还是代码文档更新,人工比对不仅效率低下,还容易遗漏关键改动,下面通过一个实际案例... 目录引言一、使用python-docx库解析文档结构二、使用difflib进行差异比对三、高级对比方

sysmain服务可以禁用吗? 电脑sysmain服务关闭后的影响与操作指南

《sysmain服务可以禁用吗?电脑sysmain服务关闭后的影响与操作指南》在Windows系统中,SysMain服务(原名Superfetch)作为一个旨在提升系统性能的关键组件,一直备受用户关... 在使用 Windows 系统时,有时候真有点像在「开盲盒」。全新安装系统后的「默认设置」,往往并不尽编

Python自动化处理PDF文档的操作完整指南

《Python自动化处理PDF文档的操作完整指南》在办公自动化中,PDF文档处理是一项常见需求,本文将介绍如何使用Python实现PDF文档的自动化处理,感兴趣的小伙伴可以跟随小编一起学习一下... 目录使用pymupdf读写PDF文件基本概念安装pymupdf提取文本内容提取图像添加水印使用pdfplum

Python从Word文档中提取图片并生成PPT的操作代码

《Python从Word文档中提取图片并生成PPT的操作代码》在日常办公场景中,我们经常需要从Word文档中提取图片,并将这些图片整理到PowerPoint幻灯片中,手动完成这一任务既耗时又容易出错,... 目录引言背景与需求解决方案概述代码解析代码核心逻辑说明总结引言在日常办公场景中,我们经常需要从 W

C#高效实现Word文档内容查找与替换的6种方法

《C#高效实现Word文档内容查找与替换的6种方法》在日常文档处理工作中,尤其是面对大型Word文档时,手动查找、替换文本往往既耗时又容易出错,本文整理了C#查找与替换Word内容的6种方法,大家可以... 目录环境准备方法一:查找文本并替换为新文本方法二:使用正则表达式查找并替换文本方法三:将文本替换为图

Springboot项目构建时各种依赖详细介绍与依赖关系说明详解

《Springboot项目构建时各种依赖详细介绍与依赖关系说明详解》SpringBoot通过spring-boot-dependencies统一依赖版本管理,spring-boot-starter-w... 目录一、spring-boot-dependencies1.简介2. 内容概览3.核心内容结构4.

Python批量替换多个Word文档的多个关键字的方法

《Python批量替换多个Word文档的多个关键字的方法》有时,我们手头上有多个Excel或者Word文件,但是领导突然要求对某几个术语进行批量的修改,你是不是有要崩溃的感觉,所以本文给大家介绍了Py... 目录工具准备先梳理一下思路神奇代码来啦!代码详解激动人心的测试结语嘿,各位小伙伴们,大家好!有没有想