css position-CSDN博客

语法

position：static | relative | absolute | fixed | center（CSS3）| page（CSS3）| sticky（CSS3）| inherit
默认值：static
适用于：除display属性定义为table-column-group | table-column之外的所有元素
继承性：无
动画性：否
计算值：指定值
媒体：视觉

说明

static：每一个元素都有一个默认的position值，那就是static，元素将会嵌入在正常的文档流里。此时，尽管你为该元素设置了left/right/top/bottom属性，但对于该元素来说，均没有效果。
relative：1）对象遵循常规流，并且参照自身在常规流中的位置通过top、right、bottom、left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素；2）随便给元素添加relative属性而不设置定位偏移则相当于未进行任何设置，但是却可以作为子absolute元素的父级定位元素。
absolute：1）对象脱离常规流，即盒子的偏移位置不影响常规流中的任何元素；2）此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素；3）其margin不与其他任何margin折叠。
fixed：1）与absolute一致，但偏移定位是以窗口为参考；2）当出现滚动条时，对象不会随着滚动。
center：与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。
page：与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。
sticky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。
inherit: position值不会级联(doesn’t cascade, 不会直接影响到子元素), 所以这个值可以强制它从父元素继承position值.

概念说明 文档流：从左到右，自上而下，结合元素块状和内联属性的默认位置摆放形式。

解读

absolute

其中对于absolute一直有一个误解：absolute是相对定位，相对必然要有一个相比较的对象，之前一直认为是其最近的relative父元素，今天看到某一篇文章后才知道这其实是错误的。正确的答案是absolute相比较的对象是其最近的非static父元素，也就是说父元素如果是absolute或fixed定位，那么也是有效的相对定位父级元素。
如果一个元素的position属性被设置为absolute, 那么这个元素的父元素将认为这个子元素根本不存在。和未进行clear的浮动元素一样，不能撑起父元素高度。