absolute和relative里面的字元素是怎么定位的?

怎么感觉楼下都是水贴......

我知道absolute脱离文档流,相对父级非static定位,relative原来的占位不变,元素实际位置脱离文档流,相对自己定位
但是好像很少有人谈到它们的子元素怎么定位。
我做了下实验,好像子元素跟着父元素在跑,也是脱离文档流了的,不知道我总结的对不对,
子元素和父元素在定位上有什么关系吗?父元素脱离文档流,子元素也脱离?况且很多人认为relative不脱离

 div class="div1"><p>111111</p></div>
<div class="div2"><p>22222</p></div>
<div class="div3"><p>33333</p></div>
.div2{
        background-color: yellow;
        opacity: 0.5;
        position: absolute/relative;
        transform: translate(50px,50px);
    }

absolute:

图片说明

relative:

图片说明

7个回答

楼上说的都蛮好的啊,被absolute的元素会向上寻找被设置了relative的父元素。一直找不到的话就会以body为主,相对于body来设置对应的top right bottom left

空间的相对位置与绝对位置。最好设置上下左右的距离来进行控制

fixed相对于body进行的窗口定位,而不是相对于父元素absolute或relative,所以当你想让fixed定位在窗口位置并且是相对于父元素的那只有一个办法就是把父元素设置为absolute或relative的同时子元素不设置任何的top、left、bottom、right。

首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位。这句话是错的。正确的是:只要父级元素设了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块(最近的)。绝对定位(Absolute positioning)元素定位的参照物是其包含块,既相对于其包含块进行定位,不一定是其父元素。建议去详细通读一下定位体系和包含块。

作者:丁小倪
链接:https://www.zhihu.com/question/19926700/answer/13483404
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

我是怎么理解的,absolute以它的父元素定位,父元素没有设置position属性,它就会以body跑,这时候设置一个top:1px就跑到顶部了,如果absolute的父元素为relative,那么它就会以它的父元素定位,top:1px就会跑到父元素relative的顶部

relative我理解的是,设置了以后还在那个位置,然后设置left或者top也是在当前位置上来回挪而已

absolute是根据最近的父级定位元素作为起始位置参考点进行定位的,如果没有定位父级元素,则以body作为参考点进行定位。relative定位的起始参考点则是它本身

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

6
怎么让背景的url跟着我设定的路线走
12
css样式设置元素无法居中
2
position:relative 和position:absolute的问题。
1
基于tensorflow的pix2pix代码中如何做到输入图像和输出图像分辨率不一致
2
请问各位大佬position: relative和 absolute怎么运用?
1
滚动图片代码修改宽度后,只滚动两张
1
用JS写的贪吃蛇,为什么定时器结束后会自动平移一格?
0
svg格式图片在<image>标签下不保持纵横比缩放,为什么我缩放不了?
1
用给的数字去判断一共可以得到多少个等式,利用C程序编写的方式来实现怎么做的
0
求助关于jquery给图片标记的定位问题
2
在html相对布局和绝对布局
2
dede 的侧边栏 改成点击展开的效果,怎么办?
0
计算从t点到s点的最小的时间,利用C语言的程序的设计的思想如何实现?
0
从给定的数字里寻找可以得到的等式,怎么运用C语言程序编写的代码的实现的方式去计算?
0
按照字母的顺序排列字符串的算法,怎么采用C语言程序代码编写的步骤去实现?
1
html 左侧内容上下滚动 右侧列表固定的问题
1
htnl5 怎么改可以让我的文字和图片适应窗口大小?
0
自循环数字的精确求解问题,运用的是C语言的程序设计的过程的方法,怎么才能实现的
0
从给定的数字里提取等式,输出能找到多少等式,用C语言的编程思想的代码编写实现的思路方法
4
css怎么实现自动轮播图片?