前端开发人员可以通过利用不同的CSS布局技术来构建复杂的页面布局。这些技术中的一些具有悠久的历史（例如浮动），而其他（例如flexbox）在过去几年中已经流行。
在本文中，我们将仔细观察一些与CSS定位布局方法相关的鲜为人知的事情。
在我们开始了解这些事情之前，让我们快速地了解可用的定位类型。
可用的CSS定位类型概述
CSS 的 position 属性允许我们指定元素的定位类型。
CSS定位选项
static 是此属性的默认值。在这一点上，我们知道一个元素没有定位。为了定位它，我们必须改变它的预定义类型。
为此，我们将上述属性的值设置为以下之一：
relativeabsolutefixedsticky
只有这样，我们可以使用 offset 属性来为我们的元素指定所需的位置：
toprightbottomleftauto（初始值）
需要注意的是，position 属性设置为 absolute 或 fixed 的元素称为绝对定位元素。另外，请注意，已定位的元素可以利用z-index属性来指定其堆栈顺序。
CSS定位属性主要区别
现在，让我们简要讨论可用定位类型之间的三个核心区别：
-
absolute定位的元素从正常流中完全移除。相邻的兄弟元素占据它的空间。 -
relative或sticky定位的元素保留其空间。相邻元素不被重新定位以占据该元素的保留空间。但是，该元素的偏移量不占用空间。它们完全被其他元素忽略，因此可能导致元素彼此重叠。 -
fixed定位的元素（记住固定的定位是绝对定位的子类）总是相对于窗口定位（除了在具有 transform 属性的父级的情况下 – 所有桌面浏览器的最新版本支持该行为） -
sticky定位的元素相对于具有滚动框的最近父级定位（例如overflow：auto）。如果没有这样的父级，它相对于窗口定位。
在以下演示中了解所有这些类型的工作原理：
注意：sticky 定位类型仍然被认为是一个实验性技术，有限的浏览器支持。当然，如果你愿意，你可以使用 polyfill（例如stickyfill）将这个功能添加到不支持它的浏览器。由于其支持有限，我们不会在本文的其余部分考虑这种类型。
带有绝对定位类型的定位元素
我相信你已经知道绝对定位的工作原理。然而，这种类型的定位对于新手来说可能比较容易混淆。
因此，我决定将它包含在本文所涵盖的一些鲜为人知的概念（以及相应的演示）的列表中。
因此，定位类型设置为绝对定位的元素相对于其最接近的已定位父级定位。当然，只有当父元素的定位类型不等于 static 时，这才有效。考虑到这一点，如果元素没有任何定位的父级，它相对于窗口定位。
请参阅以下演示：
绝对定位的元素忽略浮动属性
如果元素向左或向右浮动，并将其定位类型设置为 absolute 或 fixed ，则 float 属性的值将变为 none 。另一方面，如果我们将其定位类型设置为 relative ，则元素保持浮动。
看看相关的demo：
在这个例子中，我们定义了两个浮动在右边的不同元素。请注意，当红色框变为绝对定位元素时，它将忽略 float 属性的值，而相对定位的绿色框保留此值。
作为块级元素绝对定位的内联元素
在这种情况下，我们定义两个不同的元素。第一个（例如绿色框）是块级元素（即div）。第二个（例如红色框）是内联（即span）元素。注意，只有绿色框出现。
红色框目前不可见，因为我们给它一个宽度和高度属性，只能应用于块级和行内块元素。此外，它是一个空元素（即它不包含任何嵌套的子元素，如文本节点）。
请记住，如果我们将其定位类型设置为 absolute 或 fixed ，则会显示该元素，因为它表现为块级元素。
边距不会在绝对定位的元素上折叠
默认情况下，当两个垂直边距相互接触时，它们将折叠为单个边距，其值由这些边距值中较大的一个指定。这种行为被称为 margin collapsing 。
类似于浮动元素的边缘所发生的情况，绝对定位元素的边缘不会与任何其他边缘折叠。
看看相关的demo：
在这个演示中，最初元素的边距等于20px。此外，其顶部边距与父级的上边距（也是20像素）折叠。正如你可以看到的，只有当我们绝对定位元素时，顶部边距不会与祖先的相关边距折叠。
但是，我们如何防止 margin collapsing ？ 好吧，我们必须把一些东西分开。
例如，一点点填充或边框（我们应该应用这个规则给父级或子集）。另一个选项是将 clearfix 类（在我们的示例中）添加到父元素。
使用像素和百分比定位元素
你曾经使用百分比而不是像素来定义定位元素的偏移量吗？ 如果答案是肯定的，您可能已经注意到，计算的偏移值根据你选择的CSS单位（即像素或百分比）有不同。
这似乎有点混乱，对吧？ 所以，让我们先看看偏移量声明为百分比的规范说明：
The offset is a percentage of the containing block’s width (for
leftorright) or height (fortopandbottom). For stickily positioned elements, the offset is a percentage of the flow root’s width (forleftorright) or height (fortoporbottom). Negative values are allowed.
话虽如此，只要我们将偏移值定义为百分比，目标元素的位置取决于其父元素的宽度（左或右偏移量）和高度（顶部或底部偏移量）。
下面的演示演示了这一差异：
在这个例子中，我们使用像素和百分比来移动元素。果然，当偏移被声明为像素时，元素被移动到我们期望的位置。到现在为止还挺好！
相反，当我们选择百分比作为偏移的所需CSS单位时，元素的位置取决于其父元素的维度。
注意：你可能已经知道，transform 属性（以及不同的 translate 函数）也允许我们改变元素的位置。但是，请注意，如果我们使用百分比作为CSS单位，元素将相对于其维度而不是相对于其父维度（与偏移量不同）进行定位。
参考链接：https://scotch.io/bar-talk/5-things-you-might-not-know-about-the-css-positioning-types
