css的定位学习

  • position
    • 相对定位:relative
      • 作用：相对元素原有位置移动指定的距离(相对的自己的原有位置)
      • 可以使用top,left,right,bottom来进行设置。
      • 注意：其他元素的位置是不改变的。
    • 绝对定位:absolute
      • 作用：可以使用元素参照界面或者相对父元素来进行移动
      • 注意：如果父级元素成为参照元素，父元素必须使用相对定位属性
      • 默认情况下是以界面为基准进行移动的。
    • 固定定位:fixed
      • 作用：将元素固定现在页面的指定位置，不会随着滚动条的移动而改变位置。
  • 以上定位都可以使用top,left,right,bottom来进行移动。
  • z-index:此属性是用来声明元素的显示级别的。
    • z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
    • 注意
      • 元素可拥有负的 z-index 属性值。
      • Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
    • 说明
      • 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。