css元素定位：通过元素的标签或者元素的id、class属性定位

**CSS 元素定位**

在 CSS 中，元素定位是指将一个或多个 HTML 元素放置到页面中指定位置的过程。通过元素的标签或者元素的 id、class 属性定位，可以实现对元素的精确控制和布局。

###1. 元素定位的基本概念在 CSS 中，元素定位是基于盒模型（Box Model）的概念进行的。盒模型将一个 HTML 元素分为四个部分：内容区域（Content）、内边距区域（Padding）、边框区域（Border）和外边距区域（Margin）。

###2. 元素定位的类型CSS 中有六种元素定位方式：

1. **static**：静态定位，元素按照其在 HTML 文档中的自然顺序排列。
2. **relative**：相对定位，元素相对于其正常位置进行偏移。
3. **absolute**：绝对定位，元素脱离文档流，根据其父元素的位置和尺寸进行定位。
4. **fixed**：固定定位，元素脱离文档流，根据视图窗口的位置和尺寸进行定位。
5. **sticky**：粘性定位，元素相对于其正常位置进行偏移，但在滚动到某个点时变为固定定位。

###3. 元素定位的属性以下是 CSS 中用于元素定位的属性：

* `position`：定义元素的定位方式。
* `top`、`right`、`bottom`、`left`：定义元素相对于其父元素或视图窗口的偏移距离。

###4. 元素定位的示例以下是 CSS 中元素定位的示例：

#### 示例1：静态定位

css/* HTML */
<div class="static">静态定位</div>

/* CSS */
.static {
 position: static;
}

css/* HTML */
<div class="relative">
 <div class="child">相对定位</div>
</div>

/* CSS */
.relative {
 position: relative;
}

.child {
 position: absolute;
 top:10px;
 left:20px;
}

css/* HTML */
<div class="absolute">
 <div class="child">绝对定位</div>
</div>

/* CSS */
.absolute {
 position: absolute;
}

.child {
 top:10px;
 left:20px;
}

css/* HTML */
<div class="fixed">
 <div class="child">固定定位</div>
</div>

/* CSS */
.fixed {
 position: fixed;
}

.child {
 top:10px;
 left:20px;
}

css/* HTML */
<div class="sticky">
 <div class="child">粘性定位</div>
</div>

/* CSS */
.sticky {
 position: sticky;
}

.child {
 top:10px;
 left:20px;
}