CSS Position属性:你需要知道的一切

了解CSS如何影响页面上元素的对齐可以提高您的设计技能并增强用户在网站上的体验。即使是最基本的网页设计也可以通过CSS看起来令人惊叹并正常工作。随着您的网站项目变得更加详细，可能会出现对齐页面元素的问题，使用CSS定位这些元素可以加快您的工作流程。

CSS允许使用不同的方法定位元素。最常见的是位置、浮动和显示。在这篇文章中，我们将解释如何使用CSS位置属性来编辑你的网页布局。我们将探索不同的位置类型，并回顾如何定位元素，如文本和图像，以创建一个美丽的网页设计。

注意，这些属性只有在位置财产已经建立。他们也会受到头寸价值的影响。

位置:静态

源

静态定位是每个HTML元素的默认设置。事实上，你没办法改变它。它不会受到某些属性的影响，这些属性会对其他CSS位置类型产生影响。不管你认为什么价值前,正当,底,左边属性，它们不会改变，属性也不会z - index所有物

位置:相对

源

在该值下，元素将跟随渲染流，但将相对于其初始位置移动。若要确定偏移量，请设置“顶部”、“右侧”、“底部”和“左侧”属性的值。处于相对位置的元素周围的其他元素不受影响，但元素所在的位置将有额外的空间。

z-index值应该设置为自动，除非您想要一个新的叠加背景．从本质上说，这意味着您将创建一组基于该元素的新层。

位置:固定

源

在该值下，元素将忽略正常的渲染流。相反，元素将相对于视窗(用户可以看到的区域)。即使页面滚动，它也不会移动。在页面布局中，没有多余的空间了。

使用前,正当,底,左边值来设置元素的最终位置。

使用固定值会自动建立新的堆叠上下文。

位置:绝对的

源

在这个值下，元素也会忽略正常的文档流，但不是根据视口进行定位，而是相对于最近的定位祖先进行定位。然而,就像固定的值，则在页面布局中没有为其创建空间。

如果没有定位的祖先，则元素的定位相对于包含块并随着滚动移动。

注意:定位元素是具有属性值的元素相对的,固定的,完全的或黏糊糊的．

价值观前,正当,底,左边确定元素的最终位置。如果z - index不是汽车，它创建一个堆叠上下文。

位置：粘性

源

元素的位置由用户的滚动决定。根据用户滚动的距离，它的行为类似于相对的值元素，直到视口满足指定位置-然后它在点中“固定”。

它总是创建一个堆叠上下文。

请记住，使用引导CSS将为您提供这五个类(它们在CSS position属性的功能中很常见)，以及另外三个用于控制元素位置的类。

这些额外的类是固定顶、固定底和粘顶。让我们在下面简单定义一下。

• fixed-top:使元素固定在屏幕的顶部，从一条边到另一条边
• fixed-bottom:使元素固定在屏幕底部，从边缘到边缘
• sticky-top:滚动元素后，使元素从一条边固定到另一条边的屏幕顶部

如果你感兴趣，可以去看看每个Bootstrap CSS位置属性类的代码和示例．

现在，您已经了解了改变元素位置的不同方法—使用和不使用Bootstrap这样的框架—让我们进一步了解一下绝对位置和相对位置之间的区别。

相对定位的元素保留在文档的流程中，而绝对定位的元素则被移开，页面上的其他元素就像元素不存在一样。

下面是一个CSS绝对定位的例子:

图像源

现在，这里有一个相对CSS定位的例子:

图像源

固定CSS位置

这个固定的CSS位置就像完全的位置有一个区别:除非元素的任何祖先都有它的变换,态度或过滤器属性设置为非没有一个，视口建立的初始包含块是元素的包含块。如果设置为没有一个，祖先将取代元素的包含块。

通过这种方式，您可以创建一个浮动元素，它将逐渐获得一个固定的位置，尽管滚动，它仍将保持在该位置。

下面是一个固定CSS定位的示例：

图像源

现在我们已经讨论了不同的职位类型和价值观，让我们看看如何在网站上使用它们。

如何在CSS中定位图像

所有关于CSS定位的指导都可以应用于图像样式。具体来说，您可以像往常一样定义图像HTML，添加任何CSS类或ID选择器来定义定位。

下面是一个如何在CSS中定位图像的示例：

HTML:

CSS:

.亲戚{
位置:相对;
}

如何在CSS中定位文本

同样，CSS定位的所有指导也可以应用于文本样式。具体来说，您可以像往常一样定义文本的HTML格式，添加任何CSS类或ID选择器来进一步定义定位。

下面是一个如何在CSS中定位文本的例子:

HTML:

你的文本到这里

CSS:

.绝对的{
位置:绝对的;
}

应用你的CSS位置属性知识

CSS position property是一项高级网页设计技能，需要练习才能掌握。将此页面添加书签，并在您探索网站上的CSS position position position时返回。当您准备好了解更多内容时，请查看我们面向营销人员的HTML和CSS初学者指南。