要想绝对定位一个div,需要使用CSS的“position”属性。该属性有4种取值,分别是static(默认值)、relative、absolute和fixed。在绝对定位div时,大家使用absolute来指定元素的位置。
div {
position: absolute;
top: 100px;
left: 200px;
}
在上面的代码中,大家指定了div元素的位置,将它放在页面上的(200,100)坐标处。top和left属性都是相对于父元素的定位,如果没有父元素,那么相对于浏览器窗口。
需要注意的是,绝对定位的元素不会占据文档流的位置,也就是说,其他元素会无视它的存在。因此,在绝对定位元素时,需要考虑周到,不要与页面上其他元素重叠。
除了top和left属性外,绝对定位还可以使用right和bottom属性指定div元素的位置,在页面的右下角显示,代码如下:
div {
position: absolute;
bottom: 0px;
right: 0px;
}
最后,大家需要记住,绝对定位元素的位置是相对于其最近的“position”属性不是“static”的祖先元素定位的。因此,在使用绝对定位时,需要考虑祖先元素的位置是否合适。