相对定位
p { position: relative; }
相对定位是相对于元素本身在文档流中的位置进行定位。在相对定位中,元素会继续占据原来的空间,其它元素仍然可以占据其原先的位置,所以相对定位的元素可以在文档流中移动,但仍然保持着原来的布局。
绝对定位
p { position: absolute; top: 50px; left: 100px; }
绝对定位是相对于其父元素进行定位的。绝对定位的元素会脱离文档流,而不占据文档流中的任何位置。因此,它可以覆盖页面上的其它元素。绝对定位的元素必须有一个相对定位或绝对定位的祖先元素来作为参考物,否则它将相对于文档的最外层进行定位。
固定定位
p { position: fixed; top: 50px; left: 100px; }
固定定位与绝对定位类似,但它是相对于浏览器窗口而不是其父元素进行定位。因此,无论滚动条如何移动,固定定位的元素始终保持在窗口的固定位置。
总的来说,定位是一种非常有用的CSS技能,它可以帮助大家在页面上更精准、更灵活地定位元素。同时,定位还可以与其它技术如层次、动画等完美结合,创造出更加丰富多彩的页面效果。