CSS3的定位

212 阅读1分钟

定位position

偏移设置: left、right、top、bottom

  1. 相对定位relative

设置相对定位的盒子原来的位置会被保留,对其父元素和相邻的元素没有任何影响

  1. 绝对定位absolute
  • 元素会脱离文档流,原本的位置不会保留
  • 会以元素最近的一个已经定位的祖先元素为基准定位
  • 如果没有已经定位的祖先元素,那么就以浏览器的窗口为基准定位
  • 当没有设置偏移量时,元素会保持在原来的位置
  1. 固定定位fixed
  • 元素会脱离文档流,原本的位置不会保留
  • 元素会以浏览器的窗口为基准定位
  • 偏移量不会随滚动条的移动而移动

练习:

image.png

image.png