了解position属性
引言：
在HTML和CSS中，有许多属性可以帮助我们控制页面中元素的布局和位置。其中之一就是position属性。通过使用position属性，我们可以改变元素在页面中的定位方式，使其相对于其父元素或其他元素进行定位。本文将深入介绍position属性的使用方法和不同的定位方式。
一、static定位
static是position属性的默认值。在static定位下，元素的位置由文档流决定，并没有特殊的定位效果。换句话说，它并不会受到其他定位方式的影响。使用static定位时，top、right、bottom和left属性不会生效。
要将元素设置为static定位，可以通过CSS样式将其position属性设置为static：
.example {
position: static;
}
二、relative定位
relative定位是一种相对于其初始位置进行定位的方式。使用relative定位，可以通过调整元素的top、right、bottom和left属性来改变元素在页面中的位置。这些属性接受正负值，可以用像素、百分比或em为单位。
相对于元素原始位置移动时，不会影响其他元素的位置。其他元素会继续占据原来的位置，但它们会根据相对定位的元素进行调整。因此，相对定位的元素仍然占据文档流中的空间。
要将元素设置为relative定位，可以通过CSS样式将其position属性设置为relative：
.example {
position: relative;
}
三、absolute定位
absolute定位使元素相对于其最近的非静态（即position被设置为relative、absolute或fixed）定位父元素进行定位。它完全脱离了文档流，不会占用其他元素的空间。
通过调整top、right、bottom和left属性，可以将元素相对于其父元素的边缘进行偏移。如果没有找到非静态定位的父元素，则元素会相对于文档的初始包含块进行定位。这通常是整个浏览器窗口。
要将元素设置为absolute定位，可以通过CSS样式将其position属性设置为absolute：
.example {
position: absolute;
}
四、fixed定位
fixed定位创建了一个相对于浏览器窗口的定位上下文。这意味着无论用户如何滚动页面，元素都将始终保持在同一个位置上。
通过设置top、right、bottom和left属性，可以调整元素与窗口边缘之间的距离。fixed定位的元素不会对其他元素产生影响，不占用文档流中的空间。
要将元素设置为fixed定位，可以通过CSS样式将其position属性设置为fixed：
.example {
position: fixed;
}
五、sticky定位
sticky定位是relative和fixed定位的结合体。当元素在屏幕中可见时，它会按照relative定位的方式进行定位，当滚动屏幕导致元素不再可见时，它会切换到fixed定位的方式进行定位。
通过设置top、right、bottom和left属性，可以定义sticky定位元素相对于其父元素的偏移量。sticky定位的元素仍然占据文档流中的空间，直到它切换到fixed定位。
要将元素设置为sticky定位，可以通过CSS样式将其position属性设置为sticky：
.example {
position: sticky;
}
：
position属性是控制元素定位的重要属性之一。通过使用不同的定位方式，我们可以更好地控制页面中元素的布局和位置。在选择使用不同的定位方式时，我们需要根据实际需求和效果来决定使用哪种方式。希望本文对你理解position属性有所帮助。
参考资料：
[1] MDN Docs. Positioning content. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning
[2] w3schools.com. CSS position property. https://www.w3schools.com/cssref/pr_class_position.asp
