CSS（层叠样式表）是网页设计中必不可少的一项技术，它负责页面的视觉表现以及布局的定义。在CSS中，position属性是非常关键的布局工具之一，它定义了一个元素在页面中的定位方式。position属性有五个值，分别是：absolute、relative、fixed、static和inherit。本次入门教程将重点讲解前三个值的用法及其在页面布局中的作用。
我们来看看position属性的默认值static。当元素的position属性被设置为static时，元素会遵循正常的文档流，按照HTML代码中出现的顺序自上而下排列。在static状态下，元素不会脱离文档流，top、bottom、left、right等属性将不会对它产生影响。这表示元素的位置是固定的，不会受到其他因素的干扰。而inherit值则意味着元素将继承其父元素的position属性值。
接下来，我们深入了解position:absolute的使用。absolute元素会脱离文档流，这意味着它周围的元素会忽略它的存在，就像是它被从文档中移除了。absolute元素可以通过top、bottom、left和right属性进行绝对定位，这些属性指定了该元素相对于其第一个已定位（非static）祖先元素的位置。如果找不到已定位的祖先元素，它将相对于初始包含块（通常是视口）定位。这一点需要特别注意，因为它决定了定位的参考点。当你将一个元素设置为absolute时，你通常会定义两个属性，例如top和left，以此来确定元素的具体位置。
与absolute相对的是relative值。relative元素遵循正常的文档流，不会脱离文档流，其周围的元素也不会忽略它的存在。它同样支持top、bottom、left和right属性，但这些属性并不会改变元素在文档流中的位置，而是相对于元素在文档流中的原始位置进行偏移。这种相对定位通常用于微调元素在页面上的位置，而不会导致其他元素的重新排列。需要强调的是，当relative元素未使用定位属性进行相对定位时，它不会被周围的元素忽略，但是当使用了定位属性后，相对定位的效果类似于元素被移动了，而周围元素会忽略它的移动，将它视为仍在原来的位置。
我们来谈谈position:fixed。fixed元素也会脱离正常的文档流，与absolute类似，它的定位与父元素没有关系，它总是相对于视口进行定位。固定定位的元素在页面滚动时位置保持不变，这使得fixed元素在进行导航栏、页脚固定等场景时非常有用。例如，在一个很长的页面中，你可以将页脚设置为fixed，这样它将始终固定在屏幕底部，即使页面滚动，也不会消失。
以上是position属性的三个常用值的基本概念和作用。在实际应用中，我们经常利用这些属性值来控制元素在页面上的布局，以及调整元素之间的相互关系。使用这些定位技术，开发者可以灵活地构建复杂的页面布局，满足各种设计需求。而在运用这些定位方法时，z-index属性也会经常使用，它能够控制重叠元素的堆叠顺序，确保元素按照预期的方式显示在页面上。在进行定位时，开发者应当仔细考虑这些属性如何影响页面布局，以及如何与其他CSS属性配合使用，以达到最佳的视觉效果和用户体验。
