ios试验性webkit功能(试验性WebKit)

点击右边红色按钮关注“网络展示”，果然你展示出来了！

前言

如果你问，CSS中有多少位置属性值？

大部分人的回答是，可能是以下几种？

{位置：静态；位置：相对；位置：绝对；位置：固定；}粘贴粘贴，粘贴，粘贴，所以叫粘贴定位。我们来看看这个实验值的具体功能和适用场景。这是一个结合了两个位置的特殊位置：相对位置和位置：固定了一些特殊场景的两个定位功能。

两种定位功能的组合是怎样的？

根据通用文档流定位元素，然后相对于元素定位流根(BFC)并包含块(最近的块级祖先)。然后，元素定位的行为是相对于一个特定的阈值，然后固定定位。

具体阈值是指顶部、底部右侧、底部或剩余的一个，换句话说，顶部、右侧、底部或左侧四个阈值中的一个只能使粘性定位有效。否则，其行为与相对定位相同。

兼容性

在讲具体例子之前，我们还是要知道位置的兼容性：粘性。除了IE，其他新浏览器都可以。当然，很多老浏览器都不是。[CSS兼容性查询URL](https://www.caniuse.com)

如何使用位置：粘对粘布局？

IOS家族(Safari iOS Safari)和火狐尽快支持。Chrome53？55实验网络平台的功能需要启用。WebKit内核用于添加私有前缀。

位置：粘性的例子

看这张GIF图。JS CSS该怎么办？

如何使用位置：粘对粘布局？

按照常规做法，可能是页面滚动事件的监听器。确保到视口顶部的距离大于该距离，并将块位置设置为：固定，反之亦然。

并且使用位置：有粘性，可以实现非常方便。

Java博客分部今天的标题是COBO分部。DIV sticky DIV div。容器{背景：# eee宽度：600px高度：1000px边缘：0自动；}.sticky-box { location:-WebKit-sticky；位置：粘性；高度：60px底部：50px背景：# # 10af7etop:0px；} div { font size:30px；文本对齐：居中；颜色：# fff高度：60px}每个内容只需添加一个块：-WebKit-sticky；位置：粘性；实现简单的实现。

注意

位置：粘性的有效性有一定的局限性，可以总结为：

1.您必须指定顶部、右侧、底部或左侧阈值之一，以使粘性定位生效。否则，其行为与相对定位相同。同时设置顶部和底部。顶部很高。左右设置时，左侧优先级高。

2.设置为location:sticky元素的任何父节点的overflow属性必须可见，否则sticky元素不会生效。在这里，你需要解释：

如果location: sticky元素设置为overflow: hidden，则父容器不能滚动，因此location: sticky元素不滚动，然后修复。

如果position:sticky元素的任何父节点位置设置为position:relative | absolute | fixed，则该元素相对于父元素定位，但不相对于视图定位。

3.达到设定的阈值。这个也很好理解，就是位置的元素：根据元素是否设置来确定相对的或者固定的粘性行为。

公告

我喜欢边肖纪点击关注了解更多资源！