首页 > 其他分享 >“子绝父相”能实现元素覆盖么?

“子绝父相”能实现元素覆盖么?

时间:2023-06-17 17:45:03浏览次数:47  
标签:盒子 元素 子绝 static 父相 position box1 box2

当将父元素设置position: relative;,子元素设置position: absolute;时,能实现子元素覆盖在父元素上面。

<head>
    <style>
        .box1 {
            position: relative;
            background-color: greenyellow;
            height: 50px;
            width: 50px;
        }
        .box2 {
            position: absolute;
            background-color:aliceblue;
            height: 20px;
            width: 20px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

image-20230617111758704

浅色的子元素覆盖在绿色父元素上,以盒子左上角为顶点对齐元素。

为什么能实现覆盖呢?先看“子绝”,官方对于绝对定位定义如下:

元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。

这里的最近的非 static 定位祖先元素就是类名为box1div(为方便描述,后续以父元素box1称呼),子元素box2被移出了文档流,其位置仅由最近的非 static 定位祖先元素box1以及偏移来确定,偏移left、right、top、bottom指定,此处没有设置偏移,在默认left: 0; top:0;的位置上。

那既然如此,“父相”的作用是什么呢?当不设置“父相”,且不显性设置父元素的position时,会发现子元素box2去找的父元素是 ICB(initial containing block,初始包含块,也就是根元素)。因为此时box1position使用了默认值staticbox2在找父元素的时候会跳过box1,直接找到根元素。该行为官方解释如下:

绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时,则相对于 ICB(initial containing block,初始包含块)。

也就是说,父元素的position不一定要设置为relative,只要不是static,元素覆盖都能实现。

html中所有盒子在根盒子里挨个排列,当某个盒子被移出了文档流,其后面的盒子会填补其空缺,但不会影响其之前已经排列好的盒子的位置。

标签:盒子,元素,子绝,static,父相,position,box1,box2
From: https://www.cnblogs.com/lhjc/p/17487781.html

相关文章

  • 写一个删除列表中重复元素的函数,要求去重后元素相对位置保持不变
    1#无集合setlist_=['a','a','b','b','c','c']list_new=[]foriinlist_:ifinotinlist_new:list_new.append(i)list_newdeffun_1(list_=['a','a','b'......
  • Fabric.js 选中元素不置顶(防止显示到顶层挡住其它元素)
     初始化画布的时候把preserveObjectStacking的属性改成true,默认是false this.canvas=newfabric.Canvas('mycanvas',{preserveObjectStacking:true}); 其它【Fabric.js元素被遮挡的部分也可以操作 】觉得很有用,记录一下,原地址:Fabric.js元素被遮挡的部分也......
  • 包含js代码的dom元素从页面上消失后发生了什么
    最近遇到了一个问题:有一个数据看板的页面运行了n天后突然页面崩溃了,爆出了outofmemory的错误。页面不复杂,几个图表定时更新数据,实在没明白为什么长时间运行后会outofmemory。在每次请求后使用console.log(window.performance.memory); 打印出页面的内存占用情况,然后就......
  • vue中this.$refs获取不到组件元素的解决办法
    vue中this.$refs获取不到组件元素的解决办法http://www.allyns.cn/info/162当我们在vue开发中遇到使用this.$refs报错获取不到组件元素时。<template><divclass="dataQueryEventGraphDialog"><hg-dialog:title="title":width="950":height="485&q......
  • C#对List的元素按属性排序
    C#对List元素排序有几种方法。方法一、使用LinqList<User>sortedList=list.OrderBy(o=>o.ID).ToList();如果按降序排序,可以使用OrderByDescending方法:List<User>sortedList=list.OrderByDescending(o=>o.ID).ToList();方法二、扩展IComparable接口示例:publiccl......
  • 关于display:flex;justify-content: space-between;的最后一个元素无法左对齐的问题解
    1.问题:当使用v-for遍历一个数组,当数字长度不是要进行左右对齐的数字的倍数*(以3为例),无法进行左对齐的问题 解决方法:1.使用watch监听这个数组的长度的变化,判断这个数组的长度是否3%2是不是等于0,如果是为则这个数字追加一个空对象,代码如下:watch:{rowsForm:{......
  • beautifulSoup找不到元素
    问题:页面F12可以定位元素,但把网页下载到本地,无法定位2种原因:1、内容在一个标签中,放在json字符串里 #内容在input里inputInfo=soup.find_all('input')[3]['value']#页面所有内容xmInfo=json.loads(inputInfo)Agency=xmInfo['author']xmContent=xmInfo['conte......
  • beautifulSoup查找元素常用汇总
    0、初始化:frombs4importBeautifulSouppageSource=driver.page_sourcesoup=BeautifulSoup(pageSource,'html.parser')1、标签名定位方法1:soup.body方法2:li.select('a')2、查找2.1、单个查找2.1.1、按text内容查找xmSoup.find(text=re.compile(......
  • 带重复元素的排列
    带重复元素的排列题目:描述给出一个具有重复数字的列表,找出列表所有不同的排列。样例样例1:输入:nums=[1,1]输出:[[1,1]]解释:[1,1]的不同排列只有[1,1]。样例2:输入:nums=[1,2,2]输出:[[1,2,2],[2,1,2],[2,2,1]]解题思路:首先思考如何去重,先......
  • DOM4J 工具类(以对象的方式增加和删除XML元素)
    packagenet.better_best.www.dynamicADPics.utils;importjava.io.File;importjava.io.FileWriter;importjava.io.IOException;importjava.util.ArrayList;importjava.util.Iterator;importjava.util.List;importorg.dom4j.Attribute;......