CSS：层叠样式表—position

本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=cjiaakj&title=CSS%EF%BC%9A%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8%E2%80%94position

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;

本文转载于:猿2048➼https://www.mk2048.com/blog/blog.php?id=cjiaakj&title=CSS%EF%BC%9A%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8%E2%80%94position