CSS 中有五种常见的定位方式，它们是：
1. 静态定位（Static）：元素的默认定位方式。在静态定位下，元素根据正常文档流进行布局，并不受到 top、left、bottom、right 等属性的影响。
HTML:
<div class="static-element">
这是静态定位的元素。
</div>
CSS:
.static-element {
position: static;
}
2. 相对定位（Relative）：通过设置元素的位置属性（如 top、left、bottom、right）来相对于其在正常文档流中的位置进行定位。相对定位会保留元素在文档流中的空间，并可以通过偏移值来调整元素的位置。
HTML:
<div class="relative-container">
<div class="relative-element">
这是相对定位的元素。
</div>
</div>
CSS:
.relative-container {
position: relative;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
3. 绝对定位（Absolute）：通过设置元素的位置属性（如 top、left、bottom、right）来相对于其最近的具有定位（position 属性为 relative、absolute、fixed 或 sticky）的祖先元素进行定位。绝对定位会脱离文档流，并且不会在布局中占用空间。
HTML:
<div class="absolute-container">
<div class="absolute-element">
这是绝对定位的元素。
</div>
</div>
CSS:
.absolute-container {
position: relative;
width: 200px;
height: 200px;
}
.absolute-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
4. 固定定位（Fixed）：与绝对定位类似，但相对于浏览器窗口或包含框的位置进行定位，而不是相对于父级元素。固定定位的元素在滚动页面时会保持在视图的固定位置。
HTML:
<div class="fixed-element">
这是固定定位的元素。
</div>
CSS:
.fixed-element {
position: fixed;
top: 0;
right: 0;
}
5. 粘性定位（Sticky）：粘性定位结合了相对定位和固定定位的特性。元素根据正常文档流进行布局，但当滚动到预定的阈值位置时会变为固定定位，保持在视图中的特定位置。
HTML:
<div class="sticky-element">
这是粘性定位的元素。
</div>
CSS:文章来源：https://www.toymoban.com/news/detail-514859.html
.sticky-element {
position: sticky;
top: 20px;
}
这些定位方式可以通过 CSS 的 `position` 属性来设置，并配合使用 `top`、`left`、`bottom`、`right` 等属性调整元素的位置。文章来源地址https://www.toymoban.com/news/detail-514859.html
到了这里，关于CSS 中有五种常见的定位方式--详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
