CSS：层叠样式表—position

kid143 发布于2019-04-23 13:38 / 852人阅读

摘要：脱离了文档流不为元素预留空间，通过指定元素相对于最近的非定位祖先元素的偏移，来确定元素位置。在所有情况下即便被定位元素为时，该元素定位均不对后续元素造成影响。否则其行为与相对定位相同。生效规则须指定或四个阈值其中之一，才可使粘性定位生效。

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;

云服务器 GPU云服务器 css样式表 html外部层叠样式 position，css position属性，css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2137.html

CSS概念【记录】

摘要：语法规则注释层叠优先级继承值块格式化上下文盒模型层叠上下文可替换元素外边距合并包含块视觉格式化模型布局模式语法属性值声明声明块规则规则集规则规则一个语句定义样式表使用的字符集告诉引擎引入一个外部样式表嵌套规则如果满足媒介查询的条件则条件规则 1、CSS语法 2、@规则 3、注释 4、层叠 5、优先级 6、继承 7、值 8、块格式化上下文 9、盒模型 10、层叠上下文 11、可替换元素 12、...

番茄西红柿 2019-04-23 11:55 评论0 收藏0
前端--CSS

摘要：一介绍是的简称中文称为层叠样式表用来控制网页数据的表现可以使网页的表现与数据内容分离，层叠样式表定义如何显示元素。用于控制内容与边框之间的距离边框围绕在内边距和内容外的边框。内容盒子的内容，显示文本和图像。一.CSS介绍 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. CSS（CascadingStyl...

番茄西红柿 2019-04-23 13:25 评论0 收藏0
CSS 的介绍

摘要：第一章宋体的介绍宋体层叠样式表，它是宋体的缩写，作用就是给宋体标签加表现形式样式宋体显示，如字体，图片，列表，位置等。宋体在制作网页时必须是背景图宋体宋体案例第一章的介绍 1.CSS：层叠样式表，它是cascading style sheets的缩写，作用就是给HTML标签加表现形式（样式-显示），如：字体，图片，列表，位置等。在浏览器中可以看到部分： HTML：超文本标记语言...

libxd 2019-04-23 13:13 评论0 收藏0
前端基础入门二（CSS）

摘要：输入的时候少按一个键浏览器兼容问题比如使用的选择器命名，在是无效的能良好区分变量命名变量命名是用不要纯数字中文等命名，尽量使用英文字母来表示。选择器和类选择器最大的不同在于使用次数上。当需要设置英文字体时，英文字体名必须位于中文字体名之前。回顾上一节HTML 思维导图 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 评论0 收藏0
CSS基础汇总

摘要：默认占满整个页面宽度，如果设置了指定宽度，则会用填充剩下的部分。关于浮动的两个特点浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。允许浮动元素出现在两侧。CSS介绍 CSS（CascadingStyleSheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS实例每个CSS样...

番茄西红柿 2019-04-23 13:41 评论0 收藏0