CSS设置DIV的定位绝对定位和相对定位

CSS设置DIV的定位绝对定位和相对定位

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属性决定,相对于其最近的已定位的祖先元素或文档的初始包含块。

绝对定位的元素会脱离文档流,不影响也不被其他非定位元素影响。

三、注意事项