CSS中position定位的六种属性值

position是CSS中的一种属性,即定位。它可以使不同的元素处于不同的位置。
它有六个取值,分别为:static、relative,absolute,fixed,inherit 和 sticky。

  1. position: static
    无定位(默认),当你没有为元素指定position时,则默认为static,元素正常出现在文档流中。
  2. position:relative
    相对定位,元素相对于自己的正常位置(使用top,bottom,left,right)进行定位,元素不脱离文档流。
  3. position:absolute
    绝对定位,相对于 static 定位以外的第一个祖先元素进行定位(其父元素没有定位则逐层上找,直到document),元素脱离文档流。(可使得内联元素可以设置宽高)
  4. position:fixed
    固定定位,相对于可视窗口定位,元素脱离文档流(可用来实现广告效果)
  5. position:inherit
    继承父元素的定位方式。
  6. position:sticky
    css3新增属性值,粘性定位。相当于relative和fixed的混合。最初会被当作是relative,相对原来位置进行偏移;一旦超过一定的阈值,会被当成fixed定位,相对于视口定位。

你可能感兴趣的:(前端)