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