css相对定位(css固定定位不脱离文档流)

  定位是一种更加高级的布局手段。

image.png

  通过定位可以将元素摆放到页面 - 使用position属性来设置定位可选值:

  static 默认值,元素是静止的没有开启定位

  relative 开启元素的相对定位

  absolute 开启元素的绝对定位

  fixed 开启元素的固定定位

  sticky 开启元素的粘滞定位

  通过定位可以将元素摆放到页面的任意位置

  1、relative(相对定位)

  相对定位的偏移参考元素是元素本身,不会使元素脱离文档流。元素的初始位置占据的空间会被保留。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级。

  2、absolute(绝对定位)

  绝对定位元素以父辈元素中最近的定位元素为参考坐标,如果绝对定位元素的父辈元素中没有采用定位的,那么此绝对定位元素的参考对象是html,元素会脱离文档流。就好像文档流中被删除了一样。并且定位元素经常与z-index属性进行层次分级。

  3、fixed(固定定位)

  位移的参考坐标是可视窗口,使用fixed的元素脱离文档流。并且定位元素经常与z-index属性进行层次分级。

  4、static (静态定位)

  默认值,元素框正常生成的,top left bottom right这几个偏移属性不会影响其静态定位的正常显示。


发表评论

评论列表

还没有评论,快来说点什么吧~