position元素层级位置，子绝父相

已于 2023-03-25 23:15:42 修改
阅读量80 收藏
点赞数
分类专栏： css、html 文章标签： css 前端
于 2023-03-25 22:47:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45000011/article/details/129773706
版权
z-index属性用于控制层叠顺序，数值越大，元素位置越靠前。当父元素设置为相对定位(relative)，子元素设为绝对定位(absolute)时，子元素会相对于父元素定位，而非文档流的位置。绝对定位的元素会寻找最近的非静态定位祖先元素进行定位。
摘要由CSDN通过智能技术生成

z-index数值越大，位置越靠前

父元素相对定位relative，子元素绝对定位absolute，relative相对于其在标准流的位置的定位，absolute是相对于其在父元素、爷爷元素、、、、等（不包括static）中的定位，

 

 

m0_45000011
关注
专栏目录
CSS中的position:relative理解
gamenoover的博客
05-27 7万+
今晚来说说CSS中的position属性，其实在实际开发页面过程中，记录一下这个让我迷茫的relative，我将它分为三种情况进行说明 包含关系：父级absolute，子级relative； 包含关系：父级relative，子级absolute； 并列关系：兄弟标签都是relative； 1.最具常见的用法就是父级标签relative，子级标签position来做到无论浏览器如何改变，都是相对...
css绝对定位分层,css定位position引发的层级关系问题详解
weixin_35118064的博客
08-03 2674
position定位里的absolute，relative和fixedabsolue：绝对定位，用top,bottom,left和right根据有定位的父级元素进行定位，如果无则相对body元素即整个页面文档进行定位。relative：相对定位，相对自己原来的位置进行定位fixed：绝对定位，相对浏览器窗口进行定位(fixed定位会让元素一直处于浏览器某个位置，不会随着滚动条滚动而变化)由posi...
css子元素相对父元素进行定位
z7的博客
07-09 9534
解决方案 在父元素中加入position:relative; 子元素中加入position:absolute; right:20px; 代码 html结构 <div id="div1"> <div id="div2"></div> </div> css #div1{ width:500px;height:500px; background-c...
position:relative,absolute子元素相对于父元素
weixin_44957983的博客
11-17 107
主要是父元素用相对定位，子元素用绝对定位。然后子元素通过left，top去调整位置。父类用相对定位 相对于原来的位置，所以不动。实现效果：图片右上角有个删除的小按钮。
CSS定位position的层级关系问题
weixin_44703582的博客
10-11 1727
目录 前言 一、position是什么？ 二、position属性 1.静态定位(static) 2.绝对定位（absolute） 3.相对定位（relative） 4.固定定位（fixed） 三、层级关系 示例：​ 总结 前言 CSS属性一共有x、y、z三条轴，但z轴只有使用了position属性时，z轴上的层级关系才体现出来，所以z-index这个属性只有定位元素才有。 一、position是什么？ position 属性规定元素的定位类型。 二、positi
css子绝父相的层级设置
nunumaymax的博客
04-02 798
css绝对定位 我们在写页面的时候经常会用到子绝父相来定位，但定位后的效果一般都是绝对定位的子元素覆盖在相对定位的父元素上，如果我们想改变覆盖的顺序可以使用 **z-index **来重新设置层级。一般将绝对定位的元素的z-index设置为-1即可。 html代码： // 相对定位：专属礼品；绝对定位：黄色背景条 <div class="answer-tip">凡报名参与并在初赛阶段提交答案的同学，有机会获得我们竞赛定制的 <span class="bold"> 专属礼品 &l
CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）
小琳爱分享的博客
07-23 890
CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）
解决css中子元素z-index与父元素兄弟节点的层级问题
08-31
然后，对于子元素来说，可以使用position属性值为relative或者absolute，然后设置其z-index属性值，来调整子元素在父元素中的层级位置。 需要注意的是，z-index只能在定位（position）属性不是static的元素中起作用...
多个父元素设置了position:relative，最里面的子元素设置position:absolute，且相对于子元素最近的父元素还设置了overflow:hidden，最外层的父元素还设置了padding:24px，怎么让子元素不相对最近的父元素定位并正常显示呢？给个代码示例
09-15
首先，确保`<span>`元素的`position`属性直接设置为`absolute`，而不是相对于最近的`relative`元素，同时将它的`top`, `right`, `bottom`, 和 `left` 属性分别设置为 `0` 或者相对于文档流的位置，比如 `top: calc...
父元素transform对子元素绝对定位的影响
weixin_51364599的博客
02-24 3714
<div style="transform: rotate(0);width: 20px;height: 20px;background-color: red;"> <div style="position: absolute;left: 0;top: 0;width: 5px;height: 5px;background-color: yellow;"></div> </div> 由上述代码可知子元素添加position:a...
CSS定位(position)
weixin_68531139的博客
07-27 362
定位模式是否脱标占有位置是否可以使用边偏移移动位置基准静态static不脱标，正常模式不可以正常模式相对定位relative脱标，占有位置可以相对自身位置移动绝对定位absolute完全脱标，不占有位置可以相对于定位父级移动位置固定定位fixed完全脱标，不占有位置可以相对于浏览器移动位置。......
06_02.绝对定位absolute、层级
大史哥哥
08-22 4057
Document /* 1.元素设置position:absolute后，元素脱离文档流 2.元素设置position:absolute后，元素具有float的特性 3.元素设置position:absolute后，元素以最近的已设置position属性的父级元素为基准进行偏移；如没有符合条件的父级元素，则以整个文档为基准 4.层级用z-index:[number]设置，数
position+元素层级
weixin_43719397的博客
12-02 2078
1、position设置元素的定位方式 left right top bottom 相当于坐标点和参考点的关系 1、默认值为static 静态 2、relative 相对定位 相对于自己的位置偏移 3、absolute 绝对定位 相对于非static最近的父级元素 一般来说是relative的 4、fixed 固定定位 一般相对于视窗 2、z-index（只对设置了position的元素起作...
position层级问题
Zenoy的博客
11-23 1532
如何让黑色的弹层置于弹窗的最上层？ 黑色的背景与弹窗是相对于body定位， 而弹层是相对于弹窗定位， 无论怎样改变弹层的z-index值都不能改变其相对于弹窗定位的事实， 所以， 应先让弹层相对于body定位，即，position可写为fixed， 然后动态获取left，top值，就可以完美的解决这个问题。 以下为例子： $('.showS
CSS 的user-select属性，控制用户是否能够选中文本内容
最新发布
读心悦
09-29 376
CSS的属性是一个在CSS3 UI规范中新增的功能，用于控制用户是否能够选中文本内容。这个属性在保护网站内容不被轻易复制、提高用户体验等方面有重要作用。以下是关于。
vue 项目打包更新后，界面未刷新时js与css资源加载404，监听资源文件404后自动重新加载页面。
xuelong的博客
09-27 281
希望可以监听到资源文件加载404时，刷新界面，解决打包后由于文件名的变化导致点击旧页面时 JS 和 CSS 文件出现 404 错误。使用方法下面方法来监听资源文件加载异常。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值