css关于relative和absolute的区别

position:relative

定位为relative的元素脱离正常的文本流中，但其在正常流中的位置依然存在

     relative定位是相对于其父组件的定位，初始位置在左上角，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性（TRBL）设定的位置是在初始位置的基础上移动，如right:1%设定后，元素会向左移动1%，即相对于父组件的右边界偏移1%的距离，父组件设定的padding有效。

position:absolute

定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在，

这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。

1. 如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定，与relative不同的是，TRBL属性设定的是组件相对于浏览器或父组件的位置，而不是其相对于边界要偏移的距离，如right:1%设定后，组件的位置就到了浏览器或父组件最右边了，只是离右边界有1%的距离。
2. 如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由 TRBL决定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根 本没有影响

总结：若想把一个定位属性为absolute的元素定位于其父级元素内，只有满足两个条件：设定TRBL；父级设定Position属性。

原文地址：https://blog.csdn.net/a2886015/article/details/136474303

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！