
CSS中DIV的绝对定位和相对定位的设置方式及效果如下:
一、相对定位(position: relative;)
设置方式:在CSS中为需要相对定位的DIV设置position: relative;,然后通过top、right、bottom、left属性来调整该DIV相对于其正常位置(即未设置定位时的位置)的偏移量。
效果:
相对定位的DIV仍然占据原来的空间位置,即其原本的位置不会被其他元素占据。
该DIV的位置会基于其原来的位置进行偏移,偏移量由top、right、bottom、left属性决定。
相对定位的元素可以作为绝对定位元素的参考点。
二、绝对定位(position: absolute;)
设置方式:在CSS中为需要绝对定位的DIV设置position: absolute;,然后通过top、right、bottom、left属性来调整该DIV相对于其最近的已定位(即设置了position属性且值不为static)的祖先元素的位置。如果没有这样的祖先元素,则相对于文档的初始包含块(通常是浏览器窗口)进行定位。
效果:
绝对定位的DIV不再占据原来的空间位置,即其原本的位置可以被其他元素占据。
该DIV的位置完全由top、right、bottom、left属性决定,相对于其最近的已定位的祖先元素或文档的初始包含块。
绝对定位的元素会脱离文档流,不影响也不被其他非定位元素影响。
三、注意事项
