html中的position属性

在HTML中，`position`属性是用来控制元素的定位方式。它可以有四个取值：`static`、`relative`、`absolute`和`fixed`。每个取值都有不同的效果和用途。

### static（默认值）

这是默认的定位方式，元素按照文档流的顺序自动排列。不需要使用`position`属性来设置。

### relative

当一个元素的`position`属性设置为`relative`时，元素的位置相对于它的正常位置会产生偏移。使用`top`、`right`、`bottom`、`left`属性来设置偏移量。

```html

```

### absolute

当一个元素的`position`属性设置为`absolute`时，元素的位置相对于最近的非`static`的父元素进行定位。如果没有非 `static` 的父元素，则相对于`body`元素进行定位。

```html

```

在上面的例子中，`.inner-box`元素相对于其父元素`.box`定位，`top`为50px，`left`为50px。

### fixed

当一个元素的`position`属性设置为`fixed`时，元素的位置相对于视窗固定定位，即无论页面如何滚动，元素将保持在视窗的相同位置。

```html

```

在上面的例子中，`.box`元素相对于视窗进行定位，`top`为50px，`left`为50px。即使页面出现滚动，`.box`元素也会保持在视窗的相同位置。

### z-index属性

`z-index`属性用于设置元素的堆叠顺序。当两个元素叠加在一起时，`z-index`属性可以控制哪个元素在上面。默认情况下，元素的`z-index`值是`auto`，也就是没有定义。当把`z-index`的值设置为一个非负整数时，该元素就会被放到该堆叠上下文中。元素的堆叠顺序由该堆叠上下文内元素的`z-index`值决定。

```html

```

在上面的例子中，`.box2`位于`.box1`上面，因为`.box2`的`z-index`值为2，而`.box1`的`z-index`值为1。如果`.box1`的`z-index`值也设置为2，那么它将会覆盖在`.box2`之上。

总结一下：

- `static`：(默认值) 元素按照文档流的顺序自动排列。

- `relative`：元素的位置相对于它的正常位置产生偏移。使用`top`、`right`、`bottom`、`left`属性来设置偏移量。

- `absolute`：元素的位置相对于最近的父元素进行定位。如果没有非 `static` 的父元素，则相对于`body`元素进行定位。

- `fixed`：元素的位置相对于视窗固定定位，即无论页面如何滚动，元素将保持在视窗的相同位置。

- `z-index`：用于设置元素的堆叠顺序。当两个元素叠加在一起时，`z-index`属性可以控制哪个元素在上面。

注意：

- 只有设置了`position`属性不为`static`的元素，才可以设置`top`、`right`、`bottom`、`left`属性。

- 绝对定位的元素脱离文档流，不会占据原来的文档空间，其它元素可以覆盖其位置。

- 固定定位的元素不论页面如何滚动，元素的位置都始终相对于视窗固定。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/