如何使用CSS位置粘性

在CSS中，有无数的属性可以让你控制网页的外观和感觉。的CSS浮动属性例如，允许您将文本围绕在图像周围。的CSS字体大小属性让你控制文本的大小。的CSS！重要属性用于覆盖CSS中的所有其他样式规则。

另一个常见的例子是CSS位置属性。此属性允许您定位HTML元素以创建理想的布局。无论您是从头开始构建站点还是使用类似的开发框架引导CSS，此属性可以节省时间，并在项目增长时避免潜在的对齐问题。

定位类型有多种，包括静态定位、相对定位、固定定位、绝对定位和粘滞定位。在这篇文章中，我们将探讨后一种位置类型，这样你就可以在你的网页上创建粘性元素。让我们开始吧。

什么是CSS位置:粘性?

默认情况下，HTML元素是静态的。这意味着，它们会根据它们在自然HTML流中的位置显示在页面上。但是，如果使用CSS位置粘滞来定义元素，则其位置会随着用户滚动而改变。

在CSS中，粘性定位具有相对定位和固定定位的特点。粘性元素相对于其在HTML流中的初始位置进行定位，直到它在视口中超过特定阈值（即用户滚动页面上的某个点）。此时，元素会像固定元素一样固定到位，直到到达其父元素的边界。此偏移点通过在CSS position属性中指定top、right、bottom或left来定义。

以下是CSS中粘性位置的语法示例：


.example {
位置:粘性;
排名：0；
}

需要注意的是，粘性位置有一些浏览器兼容性问题。Internet Explorer和Edge 15(以及更早的版本)不支持这种位置类型。Safari有，但它需要前缀“webkit”。我们会在第一个例子中看到。

下面让我们看一些使用粘性定位的例子。

如何在HTML中创建粘性元素

假设你在主页的导航栏上方有你的网站名称。当用户向下滚动页面时，导航栏位于屏幕的最上方，你希望导航栏与顶部保持10个像素的固定距离。

下面是包含大量虚拟文本的HTML，以便更清楚地看到粘性定位的效果：


< div >
CSS位置：粘性示例

当你滚动到它的偏移点之后，这个元素将从视口的顶部粘10个像素

`让我们上下滚动页面`

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

这里是你可以用来创建一个橙绿色

元素，在Safari中从屏幕顶部粘10像素(加上一些边距和填充属性，使布局更漂亮)。


.stickyexample {
职位：-网络工具包粘性；
位置:粘性;
上图:10 px;
背景色：#00ff00；
填充：3倍；
}
身体{
保证金:0;
}
h1.容器液体{
利润率：15px；
}

结果如下：

源

如何在引导中创建粘性元素

在引导中创建粘性元素与上面解释的过程略有不同。这是因为Bootstrap提供了用于快速配置元素位置的简写实用程序．这些快速定位类有:

class=“位置静态”李< / >
class=“相对位置”李< / >
类= " position-absolute "李< / >
类= " position-fixed "李< / >
class=“位置粘性”李< / >
类= " fixed-top "李< / >
class=“固定底部”李< / >
类= " sticky-top "李< / >< / ul >
这意味着您只需在HTML中添加用于粘滞定位的速记工具，并定义您希望元素粘滞在CSS中的顶部、底部、左侧或右侧的距离。如果使用.sticky top类，则无需在CSS中添加任何内容。
假设您想制作一个粘性顶部引导导航栏。首先，这里是创建引导导航（没有明确的定位）。它将有一个蓝色的背景色标记为“信息”，一些虚拟导航链接到功能和定价页面，以及一个小断点。
```
< class = " navbar-brand " href = " # " >导航条< / >
< ul类= " navbar-nav " >
<李类= " nav-item活跃”>
< class = " nav-link " href = " # " > < / >回家
李< / >
< class = " nav-link " href = " # " > < / >特性
李< / >
< class = " nav-link " href = " # " > < / >定价
李< / >
```
由于未定义定位，默认情况下导航栏是静态的。以下是引导站点前端的情况：

源
要使导航栏粘贴到视口顶部，只需在HTML中添加.sticky top实用程序作为
元素的类名。
以下是您的HTML中的内容：
```
< class = " navbar-brand " href = " # " >导航条< / >
< ul类= " navbar-nav " >
<李类= " nav-item活跃”>
< class = " nav-link " href = " # " > < / >回家
李< / >
< class = " nav-link " href = " # " > < / >特性
李< / >
< class = " nav-link " href = " # " > < / >定价
李< / >
```
下面是它在前端的样子:

源
为什么位置粘不工作?
假设你开始使用这种位置，并遇到了一些问题。
如果您的元素没有坚持下去，那么返回到您的HTML。如果您将带有sticky position样式的元素单独放置在包装器元素中，那么它将无法粘住。为什么?
因为粘性项的容器(或父元素)是它可以粘附的唯一区域，所以粘性项只能漂浮在兄弟元素上。换句话说，你的粘性物品不能是独生子女。
假设在引导导航栏上方有一个标题，当用户滚动超过其定义点时，您希望导航栏贴在屏幕顶部。然后您可以使用以下CSS：
```
.位置粘性{
排名：0；
}
```
下面的HTML是不正确的，因为粘性导航条单独包装在
元素中。
```
你好，世界
< div >
< navbar class="navbar -expand-sm navbar-light bg-info position-sticky">
< class = " navbar-brand " href = " # " >导航条< / >
< ul类= " navbar-nav " >
<李类= " nav-item活跃”>
< class = " nav-link " href = " # " > < / >回家
李< / >
< class = " nav-link " href = " # " > < / >特性
李< / >
< class = " nav-link " href = " # " > < / >定价
李< / >
< / ul >
```

< div >

因此导航栏不会被固定。

源

下面的HTML是正确的，因为它有一个父元素

环绕多个子元素，包括粘性导航栏以及标题和段落元素。


< div >
你好，世界
< navbar class="navbar -expand-sm navbar-light bg-info position-sticky">
< class = " navbar-brand " href = " # " >导航条< / >
< ul类= " navbar-nav " >
<李类= " nav-item活跃”>
< class = " nav-link " href = " # " > < / >回家
李< / >
< class = " nav-link " href = " # " > < / >特性
李< / >
< class = " nav-link " href = " # " > < / >定价
李< / >
< / ul >
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡