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

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

相关文章

使用EasyPoi快速导出Word文档功能的实现步骤

《使用EasyPoi快速导出Word文档功能的实现步骤》EasyPoi是一个基于ApachePOI的开源Java工具库,旨在简化Excel和Word文档的操作,本文将详细介绍如何使用EasyPoi快速... 目录一、准备工作1、引入依赖二、准备好一个word模版文件三、编写导出方法的工具类四、在Export

利用Python操作Word文档页码的实际应用

《利用Python操作Word文档页码的实际应用》在撰写长篇文档时,经常需要将文档分成多个节,每个节都需要单独的页码,下面:本文主要介绍利用Python操作Word文档页码的相关资料,文中通过代码... 目录需求:文档详情:要求:该程序的功能是:总结需求:一次性处理24个文档的页码。文档详情:1、每个

C++读写word文档(.docx)DuckX库的使用详解

《C++读写word文档(.docx)DuckX库的使用详解》DuckX是C++库,用于创建/编辑.docx文件,支持读取文档、添加段落/片段、编辑表格,解决中文乱码需更改编码方案,进阶功能含文本替换... 目录一、基本用法1. 读取文档3. 添加段落4. 添加片段3. 编辑表格二、进阶用法1. 文本替换2

Java 中的 equals 和 hashCode 方法关系与正确重写实践案例

《Java中的equals和hashCode方法关系与正确重写实践案例》在Java中,equals和hashCode方法是Object类的核心方法,广泛用于对象比较和哈希集合(如HashMa... 目录一、背景与需求分析1.1 equals 和 hashCode 的背景1.2 需求分析1.3 技术挑战1.4

Python实现自动化删除Word文档超链接的实用技巧

《Python实现自动化删除Word文档超链接的实用技巧》在日常工作中,我们经常需要处理各种Word文档,本文将深入探讨如何利用Python,特别是借助一个功能强大的库,高效移除Word文档中的超链接... 目录为什么需要移除Word文档超链接准备工作:环境搭建与库安装核心实现:使用python移除超链接的

线上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 系统时,有时候真有点像在「开盲盒」。全新安装系统后的「默认设置」,往往并不尽编