父元素设置的定位对子元素的影响

来源:2-4 编程练习

原子Q

2021-01-25 19:24:48

父元素的相对定位和绝对定位对子元素的影响有什么不同?

写回答

1回答

好帮手慕小尤

2021-01-26

同学你好,1、relative(相对定位):定位是相对于自身位置定位(设置偏移量的时候,会相对于自身所在的位置偏移)。设置了relative的元素仍然处在文档流中,元素的宽高不变,设置偏移量也不会影响其他元素的位置(基本不会影响子元素)。最外层容器设置为relative定位,在没有设置宽度的情况下,宽度是整个浏览器的宽度。

2、absolute(绝对定位):定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的,如果没有父元素设置绝对或相对定位,则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流,元素在没有设置宽度的情况下,宽度由元素里面的内容决定。脱离后原来的位置相当于是空的,下面的元素会来占据位置。

    也就是说绝对定位会脱离文档流,宽高收缩,不定宽高的话,是由子元素的内容撑开的。子元素是在父元素的内部,不会受父元素的影响。但因为父元素的绝对定位,会影响父元素同级别的兄弟元素以及它自己的父元素。

3、综上所述,不管父元素是绝对定位还是相对定位,子元素都是以当前父元素的位置为基准再进行偏移的。

祝学习愉快!

0

0 学习 · 16556 问题

查看课程