CSS中的相对定位relative与绝对定位absolute

relative和absolute的使用要点总结

这是总结性文章, 有助于快速回顾使用要点

relative

• 相对自身定位, 无侵入定位(虽然脱离了文档流, 但是会保留自身原来的位置, 不会影响相邻元素的位置)

absolute

• 相对使用了定位的父级元素, 没有就相对于body;
• 脱离文档流, 下面的元素可能会"浮上来";

“内绝外相”

• "内绝外相"说的是, 需要定位的元素作为子元素设置为absolute(“内绝”), 再将它的父元素或者添加一个父元素设置为relative(“外相”)
• 父元素只要进行了定位(无论是relative, 还是relative), 子元素设置为absolute都可以相对于父元素进行定位, 那么为什么父元素要设置为relative, 而不设置为absolute呢?因为relative定位的无侵入性, 即不会影响父元素自身以及父元素的相邻元素的位置