1. 概述
在CSS中，有三种定位方式：相对定位、绝对定位和固定定位。
这些定位方法可以让我们在网页中创建更具吸引力和更有趣的布局。
使用定位，可以将元素放在页面的任何位置，并控制其和其他元素的交互方式。
2. 相对定位
相对定位是指将元素相对于它在文档中的原始位置进行定位。在相对定位中，元素仍占据其原始空间，因此它可能会覆盖其他元素。
2.1 语法
selector {
position: relative;
top: 20px;
left: 30px;
}
position:relative;属性将元素设置为相对定位。使用top和left属性可以将元素从其原始位置移动（向下和向右为正方向）。
2.2 例子
下面是一个使用相对定位的简单示例：
div {
position: relative;
top: 50px;
left: 50px;
}
这会将元素向下移动50像素，向右移动50像素。
3. 绝对定位
绝对定位是指将元素相对于其最近的有定位祖先元素定位（如果没有祖先，则相对于 body 元素进行定位）。
在绝对定位中，元素不再保留它在文档中的空间，因此它可能会遮挡其他元素，并且如果我们的整个页面太小，那么当我们的视口变得足够小时，元素可能会完全离开我们的页面而不可见。
3.1 语法
selector {
position: absolute;
top: 20px;
left: 30px;
}
position:absolute; 属性将元素设置为绝对定位，top和left属性可用于定义元素的位置。
3.2 例子
下面是一个使用绝对定位的简单示例：
div {
position: absolute;
top: 50px;
left: 50px;
}
这将把元素放入预期的位置，向下移动50像素并向右移动50像素。
4. 固定定位
固定定位与绝对定位非常相似，因为它们都是相对于父元素进行定位。但是，固定定位的父元素是视口，而不是文档中的其他元素。这意味着，如果我们在页面滚动时将页面元素设置为固定，则该元素将在视口中保持不动，直到我们将其移动。
4.1 语法
selector {
position: fixed;
top: 20px;
left: 30px;
}
position:fixed; 属性将元素设置为固定定位，top和left属性可用于定义元素的位置。
4.2 例子
下面是一个使用固定定位的简单示例：
div {
position: fixed;
top: 50px;
left: 50px;
}
这将将元素放入预期的位置，相对于视口，向下和向右移动50像素。
5. 总结
掌握 CSS 定位对于任何想要掌握网页设计的人来说都是至关重要的。
相对定位、绝对定位和固定定位是实现 CSS 布局的强大工具。了解如何定位元素可以让开发者将元素放置在页面的任何位置，并具有吸引力和可读性的布局。除此之外我们要谨慎使用位置定位属性，因为使用得不当会导致一个糟糕的用户体验。