html，之，position用法

在 HTML 中，我们可以使用 position 属性来控制元素的定位方式，该属性是 CSS 中最基本的定位属性之一，在布局页面时被广泛使用。它有以下5种取值：

1. static（默认值）：元素遵循正常的文档流布局，无法使用 top/bottom/left/right 属性来定位。

2. relative：元素相对于其原先在文档流中的位置，通过 top/bottom/left/right 属性进行偏移。

3. absolute：元素绝对定位，相对于文档的最近的已经定位的父元素（如果没有，则相对于文档）。

4. fixed：元素绝对定位，相对于浏览器窗口进行定位，不随着页面滚动而改变位置。

5. sticky：元素在跨越特定阈值前为相对定位，之后为固定定位。

下面我们来详细介绍一下每一种取值的用法和注意事项。

1. static

static 是 CSS 中 position 属性的默认值，它表示该元素遵循正常的文档流布局，无法使用 top/bottom/left/right 属性来定位。下面是一个示例：

```html

```

```css

div {

background-color: #ddd;

padding: 20px;

}

p {

background-color: #fff;

padding: 10px;

margin: 0;

}

```

上面的代码中，`div` 元素的 `position` 属性值为默认值 `static`，因此 `p` 元素就会按照正常的文档流布局显示。

2. relative

relative 表示元素相对于其原先在文档流中的位置进行定位，可以通过 top/bottom/left/right 属性进行偏移。此时该元素仍然在文档流中占据原先的位置，因此在调整位置时不会影响其他元素的布局。下面是一个示例：

```html

```

```css

div {

background-color: #ddd;

padding: 20px;

}

p {

background-color: #fff;

padding: 10px;

margin: 0;

position: relative;

top: 20px;

left: 20px;

}

```

上面的代码中，`p` 元素的 `position` 属性值为 `relative`，并且使用 `top` 和 `left` 属性将其向下和向右移动了一定距离。

需要注意的是，如果相对定位的元素设置了 `z-index` 属性，则会在文档流中覆盖掉其他元素。如果多个元素都设置了 `z-index`，则数值大的元素会覆盖数值小的元素。

3. absolute

absolute 表示元素绝对定位，相对于文档的最近的已经定位的祖先元素（如果没有，则相对于文档）。因此，在使用绝对定位时需要保证元素的父元素中至少有一个定位了，否则元素会跑到文档的左上角。下面是一个示例：

```html

```

```css

div {

background-color: #ddd;

padding: 20px;

position: relative;

}

p {

background-color: #fff;

padding: 10px;

margin: 0;

}

img {

position: absolute;

top: 20px;

left: 20px;

}

```

上面的代码中，`div` 元素的 `position` 属性值为 `relative`，`img` 元素的 `position` 属性值为 `absolute`，所以 `img` 元素是相对于 `div` 元素的位置进行了定位。

绝对定位的元素也可以使用 top/bottom/left/right 属性来进行偏移。如果指定了 `top` 和 `bottom` 属性，则该元素会垂直居中；如果指定了 `left` 和 `right` 属性，则该元素会水平居中。

需要注意的是，在绝对定位时，元素的高度和宽度需要手动设置，否则元素会以内容的宽度和高度进行定位。

4. fixed

fixed 表示元素绝对定位，相对于浏览器窗口进行定位，不随着页面滚动而改变位置。因此在需要固定在页面某个位置的元素中使用，比如导航栏，广告条等。下面是一个示例：

```html

```

```css

div {

background-color: #ddd;

padding: 20px;

}

p {

background-color: #fff;

padding: 10px;

margin: 0;

}

.fixed {

position: fixed;

bottom: 0;

left: 0;

width: 100%;

padding: 10px;

background-color: #333;

color: #fff;

text-align: center;

}

```

上面的代码中，`.fixed` 元素的 `position` 属性值为 `fixed`，通过 `bottom` 和 `left` 属性将其定位在页面底部，并对其进行样式设置。

需要注意的是，固定定位的元素会脱离文档流，因此在计算页面布局时需要注意，一般需要设置相应的 margin 或 padding 来占用被固定元素脱离的空间。

5. sticky

sticky 是CSS3中新增的 position 属性值，表示元素在跨越特定阈值前为相对定位，之后为固定定位。可以通过 top/bottom/left/right 属性来进行偏移。它比 fixed 更加灵活，因为它只在它的容器的边界内 "固定"，而不是整个文档的边界。下面是一个示例：

```html

```

```css

div {

background-color: #ddd;

padding: 20px;

height: 100vh;

}

p {

margin: 0;

background-color: #fff;

padding: 10px;

}

.sticky {

position: sticky;

top: 50px;

padding: 10px;

background-color: #333;

color: #fff;

height: 50px;

}

```

上面的代码中，`.sticky` 元素的 `position` 属性值为 `sticky`，通过 `top` 属性将其定位在页面顶部并相对定位，当页面滚动到该元素时，它会固定在页面顶部。

需要注意的是，sticky 定位相对于其父元素的边框进行偏移，如果父元素没有设置高度，则 sticky 元素会一直处于相对定位状态，直到滚动到文档的底部。

综上所述，position 属性是 CSS 布局中最常用的基本属性之一，通过不同的取值，可以实现灵活、多样的布局。在使用时需要注意不同值的区别和注意事项。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/