htmledit_views">
1.
2.
3.
4.
5.
position 属性概述
position 属性用于指定一个元素在文档中的定位方式。主要有五种属性值：static、relative、absolute、fixed 和 sticky。
1. static
- 默认值：所有元素的默认定位方式。
- 特性：元素按照正常的文档流排列，不受
top、right、bottom、left等定位属性影响。
<p style="position: static;">This is a static positioned element.</p>2. relative
- 特性：元素仍然处于正常文档流中，但可以使用
top、right、bottom、left属性进行偏移，偏移相对于其正常位置。
<div style="position: relative; top: 10px; left: 20px;">This is a relatively positioned element.
</div>- 示例解释：这个元素将从它在文档流中的正常位置向下偏移10像素，向右偏移20像素。
3. absolute
- 特性：元素脱离文档流，相对于最近的已定位（
relative、absolute或fixed）的祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是文档的根元素）进行定位。
<div style="position: relative;"><div style="position: absolute; top: 10px; left: 20px;">This is an absolutely positioned element.</div>
</div>- 示例解释：内层的
div将相对于外层的div（最近的已定位祖先元素）进行定位，向下偏移10像素，向右偏移20像素。
4. fixed
- 特性：元素脱离文档流，相对于浏览器窗口进行定位，无论页面滚动如何变化，元素始终保持在指定位置。
<div style="position: fixed; top: 10px; right: 20px;">This is a fixed positioned element.
</div>- 示例解释：这个元素将始终固定在浏览器窗口的右上角，距离顶部10像素，距离右侧20像素，即使页面滚动也不会改变。
5. sticky
- 特性：元素在正常文档流中，基于用户的滚动位置进行定位。在超过指定的阈值（通过
top、right、bottom或left属性设置）之前表现为相对定位，超过阈值后表现为固定定位。
<div style="position: sticky; top: 0;">This is a sticky positioned element.
</div>- 示例解释：这个元素在页面滚动时会“粘”在视口的顶部，当其到达视口顶部时保持固定不动，直到其包含块超出视口。
使用场景总结
static：默认值，一般不需要特别指定，除非需要覆盖其他指定的position值。relative：在需要对元素进行轻微调整且保持其在文档流中的位置时使用。absolute：在需要将元素精确定位并从文档流中移除时使用，如弹出框、悬浮菜单等。fixed：在需要元素固定在视口特定位置时使用，如固定导航栏、侧边栏等。sticky：在需要元素在滚动时固定但仍受文档流影响时使用，如滚动表头。
例子
1. 绝对定位和相对定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Position Example</title><style>.container {position: relative;width: 200px;height: 200px;background-color: lightblue;}.absolute-box {position: absolute;top: 50px;left: 50px;width: 100px;height: 100px;background-color: coral;}</style>
</head>
<body><div class="container"><div class="absolute-box">Absolute</div></div>
</body>
</html>2. 固定定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Position Fixed Example</title><style>.fixed-box {position: fixed;top: 0;right: 0;width: 100px;height: 100px;background-color: coral;}.content {height: 2000px;}</style>
</head>
<body><div class="fixed-box">Fixed</div><div class="content">Scroll down to see the fixed element.</div>
</body>
</html>通过以上讲解，你应该能够理解和应用 position 属性的不同值，并知道在实际开发中如何使用它们来实现不同的布局效果。
1. 只知道absolute和relative。
2.
static：默认值，一般不需要特别指定，除非需要覆盖其他指定的position值。relative：在需要对元素进行轻微调整且保持其在文档流中的位置时使用。absolute：在需要将元素精确定位并从文档流中移除时使用，如弹出框、悬浮菜单等。fixed：在需要元素固定在视口特定位置时使用，如固定导航栏、侧边栏等。sticky：在需要元素在滚动时固定但仍受文档流影响时使用，如滚动表头。
3. /
4.
static：默认值，一般不需要特别指定，除非需要覆盖其他指定的position值。relative：在需要对元素进行轻微调整且保持其在文档流中的位置时使用。absolute：在需要将元素精确定位并从文档流中移除时使用，如弹出框、悬浮菜单等。fixed：在需要元素固定在视口特定位置时使用，如固定导航栏、侧边栏等。sticky：在需要元素在滚动时固定但仍受文档流影响时使用，如滚动表头。
