CSS定位position

position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。

relative相对定位

position:relative :元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。通过“left”,”top”,”right”,”bottom”来规定位置。

*相对定位的元素并未脱离文档流

:图二chlid1相对自己原来的位置向右移动了50px,但是child2作为一个行内元素并没有向前移动,去占据child1留下来的空白位置(说明child1原来的位置仍然被它占据着)

absolute绝对定位

position:absolute :不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置(如果没有祖先元素,则用它所在的包含块来定位)。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。通过“left”,”top”,”right”,”bottom”来规定位置。

*绝对定位的元素脱离了文档流

  • 有非 static 定位的祖先元素

    • 当最近的祖先元素添加position:relative 后,child1根据它来定位。
    • child1设置了absolute绝对定位后,它的宽度变成了30px,变成了块状元素,即使后面再次声明display:inline; ,它还是以块状元素来显示。
  • 没有非 static 定位的祖先元素

    • 可以看到child1并非根据body以及html来定位。经查css spec(如下图),在没有非static定位的祖先元素的时候,absolute定位是根据根元素的包含块(containing block)来定位的,根元素的包含块也叫初始包含块(initial containing block), 而初始包含块取自视口的尺寸,并且被固定在画布开始的位置。

fixed绝对定位

position:fixed :不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。通过“left”,”top”,”right”,”bottom”来规定位置。

*绝对定位的元素脱离了文档流,比浮动元素更高一层。