position
position就是指定盒子的位置,指它相对其父级的位置和相对它自身应该在的位置。
position属性
- static:默认值,没有定位
- relative:相对定位
- absolute:绝对定位
- fixed:固定定位。【fixed目前还不被一些浏览器支持,实际网页制作中也不常用】
static属性
static为默认值,它表示盒子保持在原本应该在的位置上,没有任何移动效果。因此,前面章节讲解的例子实际上都是static方式。
relative(相对定位)
使用relative属性值设置元素的相对定位【相对自身原来位置进行偏移】,除了将position属性设置为relative之外,还需要指定一定的偏移量,水平方向使用left或right属性来指定,垂直方向使用top或bottom属性来指定。
相对定位元素的规律
- 设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置。
- 设置相对定位的盒子仍在标准流中,它对父级盒子和相邻的盒子都没有任何影响。
absolute属性值
绝对定位小结
- 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。
- 绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响。