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

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

相关文章

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

SWAP作物生长模型安装教程、数据制备、敏感性分析、气候变化影响、R模型敏感性分析与贝叶斯优化、Fortran源代码分析、气候数据降尺度与变化影响分析

查看原文>>>全流程SWAP农业模型数据制备、敏感性分析及气候变化影响实践技术应用 SWAP模型是由荷兰瓦赫宁根大学开发的先进农作物模型,它综合考虑了土壤-水分-大气以及植被间的相互作用;是一种描述作物生长过程的一种机理性作物生长模型。它不但运用Richard方程,使其能够精确的模拟土壤中水分的运动,而且耦合了WOFOST作物模型使作物的生长描述更为科学。 本文让更多的科研人员和农业工作者

POJ1269 判断2条直线的位置关系

题目大意:给两个点能够确定一条直线,题目给出两条直线(由4个点确定),要求判断出这两条直线的关系:平行,同线,相交。如果相交还要求出交点坐标。 解题思路: 先判断两条直线p1p2, q1q2是否共线, 如果不是,再判断 直线 是否平行, 如果还不是, 则两直线相交。  判断共线:  p1p2q1 共线 且 p1p2q2 共线 ,共线用叉乘为 0  来判断,  判断 平行:  p1p

pip-tools:打造可重复、可控的 Python 开发环境,解决依赖关系,让代码更稳定

在 Python 开发中,管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等,都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools? pip-tools 是一组命令行工具,旨在简化 Python 依赖关系的管理,确保项目环境的稳定性和可重复性。它主要包含两个核心工具:pip-compile 和 pip

js定位navigator.geolocation

一、简介   html5为window.navigator提供了geolocation属性,用于获取基于浏览器的当前用户地理位置。   window.navigator.geolocation提供了3个方法分别是: void getCurrentPosition(onSuccess,onError,options);//获取用户当前位置int watchCurrentPosition(

Python脚本:TXT文档行数统计

count = 0 #计数变量file_dirs = input('请输入您要统计的文件根路径:')filename = open(file_dirs,'r') #以只读方式打开文件file_contents = filename.read() #读取文档内容到file_contentsfor file_content in file_contents:

bcolz文档

原文:http://bcolz.blosc.org/en/latest/reference.html First level variables bcolz.__version__'''bcolz包的版本。''' bcolz.dask_here'''是否检测到dask的最低版本。''' bcolz.min_dask_version'''需要dask的最低版本(dask是可选

WordPress开发中常用的工具或api文档

http://php.net/ http://httpd.apache.org/ https://wordpress.org/ https://cn.wordpress.org/ https://core.svn.wordpress.org/ zh-cn:开发者文档: https://codex.wordpress.org/zh-cn:%E5%BC%80%E5%8F%91%E8%80%