css中,绝对定位和相对定位怎么理解

html-css017

css中,绝对定位和相对定位怎么理解,第1张

相对定位就是当前元素相对于父级元素的相对定位,当前元素设置相对定位后,原来的位置仍然保留;绝对定位是相对于body绝对定位,若想设置随父级绝对定位可先设置父级相对定位即可。设置绝对定位后,当前元素的位置不被保留

relative定位(相对定位) position:relative

相对本元素的左上角进行定位,top,left,bottom,right都可以有值。虽然经过定位后,位置可能会移动,但是本元素并没有脱离文档流,还占有原来的页面空间。可以设置z-index。使本元素相对于文档流中的元素,或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。

相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位,本元素需要设置position为relative。

absolute定位(绝对定位) position:absolute

相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位,如果在祖代元素中没有有relative定位的,就默认相对于body进行定位。