愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

CSS定位方式

CSS中,定位的方式有:

  • static 默认
  • relative
  • absolute
  • fixed
  • inherit 继承

position

定位方式使用position来指定,其中,这几种position取值的含义为:
1、static 默认方式,没有定位,元素出现在正常的文档流中
2、relative 相对定位,相对于其在正常的文档流中最近的对象进行定位
3、absolute 绝对定位,参照对象为最近一级的定位非static的父元素来定位
4、fixed 参照的对象为浏览器窗口的绝对定位
5、inherit 继承父元素的position

z-index

z-index 用于指定定位方式为positionabsolute的元素,其漂浮层的层级。z-index 的数值越大,层级越靠前,越小越靠后。
注意:
1、只有在值为positionabsolute的定位方式中,该属性才能生效
2、对窗口控件(如<select>)无影响

定位位置

只有positionabsolute能够进行定位位置属性的设置,主要通过topleftrightbottom四个属性来指定