html css JavaScript 前端 css定位 子绝父相 相对定位 绝对定位 固定定位 粘贴定位 叠放层次

在CSS中，有四种不同的定位方式：

1. 静态定位（Static Positioning）
2. 相对定位（Relative Positioning）
3. 绝对定位（Absolute Positioning）
4. 固定定位（Fixed Positioning）
5. 静态定位：这是所有元素的默认定位方式，即按照正常文档流进行布局。
6. 相对定位：元素相对于其正常位置进行定位。可以通过top, bottom, left, right属性进行微调。
7. 绝对定位：元素相对于最近的非静态定位的父元素进行定位。如果没有，则相对于body元素。
8. 固定定位：元素相对于浏览器窗口进行定位，无论滚动条如何滚动，元素都会固定在屏幕的指定位置。

以下是对应的CSS代码示例：

/* 静态定位 */
/* 相对定位 */
.relative {
  position: relative;
  left: 20px;
  top: 20px;
}
 
/* 绝对定位 */
.absolute {
  position: absolute;
  left: 20px;
  top: 20px;
}
 
/* 固定定位 */
.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

在HTML中使用这些定位方式：

<!-- 静态定位 -->
<div>Static Positioning</div>
 
<!-- 相对定位 -->
<div class="relative">Relative Positioning</div>
 
<!-- 绝对定位 -->
<div class="absolute">Absolute Positioning</div>
 
<!-- 固定定位 -->
<div class="fixed">Fixed Positioning</div>

注意："粘贴定位"不是CSS的标准定位方式，如果你是指的是设置元素为固定位置，请确保使用position: fixed;。