css中有几种定位方式有哪些

CSS中有几种定位方式有哪些？
CSS中有三种常见的定位方式：相对定位、绝对定位和固定定位。
相对定位：
相对定位（relative）是元素相对于原始位置调整位置，但不脱离文档流。相对定位元素仍会占据其原始位置，其他元素将会像相对定位元素没有移动一样排列。
下面是相对定位的示例代码：

html
<p>这是一个相对定位的段落</p>
<p>这是另一个没有定位的段落</p> 

css
p {
  position: relative;
  left: 30px;
  top: 20px;
} 

绝对定位：
绝对定位（absolute）是元素相对于最近的已定位祖先元素或者文档的左上角进行定位，也就是脱离文档流。如果没有已定位祖先元素，则相对于文档定位，这时候通常会给元素设置一个相对定位。
下面是绝对定位的示例代码：

html
<div class="container">
  <p>这是一个绝对定位的段落</p>
</div> 

css
.container {
  position: relative;
  width: 200px;
  height: 200px;
}
p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

固定定位：
固定定位（fixed）是元素相对于浏览器窗口进行定位，这意味着不管页面如何滚动，元素都会保持在指定的位置上。
下面是固定定位的示例代码：

html
<div class="header">
  <p>这是一个固定定位的段落</p>
</div>
<p>这是一段内容，元素会在其上面悬浮</p> 

css
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
p {
  margin-top: 50px;
} 

以上就是CSS中常见的三种定位方式的介绍及示例代码。当然，还有一种比较少用的定位方式，即粘性定位（sticky），它可以让元素在滚动的时候“粘”在页面上方或下方。但简单介绍一下它的使用方法就超出了本篇文章的范围，有兴趣的读者可以另行查阅相关资料。