CSS定位的详细介绍
CSS中定位(position)的详细介绍:(主要分为静态定位,相对定位,绝对定位,固定定位,粘性定位这五种,确定坐标:left,right,top,bottom)z-index层叠属性作用于绝对定位和固定定位,来控制定位元素的层次关系,后定位的元素会把前面定位的盖住。
-
static(静态定位)
一般是默认文本流的状态,不会识别left,right,top,bottom所指定的坐标 -
absolute(绝对定位)
找到参照物,按照已经有定位的父元素进行位置变化,如果没有父元素或者父元素没有定位的情况下,则以整个文档流为参照物,可以使用left,right,top,bottom进行位置移动,绝对定位脱离文档,不占据空间,在设置为绝对定位时,没有指定的值,他们的值为文档流中位置的默认值。 -
relative(相对定位)
以自身默认的位置为参照物,对父元素未被占用的空间进行定位,用left,right,top,bottom移动位置,始终占据空间,但不会破坏文档流。 -
fixed(固定定位)
这种定位方式是以整个文档为参照物,只需要为他设置方向的位置即可,脱离整个文档流,不占据空间。 -
sticky(粘性定位)
是相对定位和固定定位的结合
页面如果没超出窗口范围,就按照relative来执行
内容如果超出窗口范围,就按照fixed执行