CSS：层叠样式表

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置。

常见语法

static | relative | absolute | sticky | fixed

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative

生成相对定位的元素，相对于其正常位置进行定位(不改变页面布局,因此会在此元素未添加定位时所在位置留下空白)。

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。脱离了文档流,不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

inherit

规定应该从父元素继承 position 属性的值。

可继承的属性：

所有元素可继承：visibility、cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse

不可继承的属性：

background-color...

initial

设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。（IE 不支持该关键字）

unset

不设置

sticky

盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

生效规则

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：
如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。
如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。

由于兼容性不好而不被重用，火狐和IOS有很好的支持性。

应用场景：电话薄和微信通讯录的字母吸顶条。

现在只需要一个属性：

position:sticky;top:0;

巴特西

CSS：层叠样式表—position

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置。

常见语法

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative

生成相对定位的元素，相对于其正常位置进行定位(不改变页面布局,因此会在此元素未添加定位时所在位置留下空白)。

absolute

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

inherit

规定应该从父元素继承 position 属性的值。

initial

设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。（IE 不支持该关键字）

unset

不设置

sticky

由于兼容性不好而不被重用，火狐和IOS有很好的支持性。

应用场景：电话薄和微信通讯录的字母吸顶条。

现在只需要一个属性：

最新文章

热门文章