包含csspositionsticky的词条

本篇文章给大家谈谈csspositionsticky，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动
• 2、css的position的属性有哪些
• 3、position(五种属性，以及每个属性的特点)

[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动

这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动

最基础的思路就是表头和内容是用两个表格来显示（图来自 ），关含做吵于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了。

纵向滚动是挺好实现的，我开始是在内容的表格外面套了胡尘一个div，之后设置 overflow-y:auto 就实现纵向滚动了。

但横向滚动呢？

首先想到的方案是在最外面的div,outer加上 overflow-x:auto

虽然这样横纵都能滚动了，但是横向滚动的时候纵向滚动条也被滚走了。

然后想到了是用js来同步，可以是可以的，谈侍但是还是想挣扎一下。

之后想到了fixed，发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。

最后突然想到一个position的新属性，sticky

设置了 position: sticky ，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果（ ）。

所以最后设置了表头

css:

就成功实现了想要的效果了。

不过sticky的兼容性也是要考虑一下的。

css的position的属性有哪些

position 属性指定了元素的定位类型。它有五个属性，分别是

static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

relative：相对定位元素的定位是相对其正常位置。

fixed：元素的位置相对于浏览器窗口是固定位置。注：即山颂使窗口是滚动的也不会移动

absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。注：定位使元悄唯唯素的位置与文档流无关，因此不占据空间。定位的元素和其他元素重叠。

sticky：基于用户的滚动位置来定位。粘性定位启培的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

[img]

position(五种属性，以及每个属性的特点)

1. position: relative;相对定位

1 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）

2 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）

3 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）

4提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。）  （两个都为定位元素，后面的会覆盖前面的定位）

2. position: absolute;绝对定位

1 使元素完全脱离文档流（在文档流中不再占位）

2 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）

3 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）

4 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）

5 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）

6 提升层级（同相对定位）

3. position: fixed;固定定位

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

4. position:static ： 默认值

默认布局。元素出现在正常的流中（忽略 top, bottom, left, right 或者型虚 z-index 声明）。

5. position: sticky 粘性定位

粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它枝含会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。

6. position: inherit

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

7. posiyion: initial

设置该属性为默认值，详情查看 CSS initial 关键字

initial 关键字用于设置 CSS 属性为它的默认值。

initial 关键字可用于任何 HTML 元素上的猛租笑任何 CSS 属性。

关于csspositionsticky和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。