我知道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:
楼上说的都蛮好的啊,被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定位的起始参考点则是它本身