逆战班 css定位锚点继承

最新推荐文章于 2024-11-07 13:56:28 发布

社会社会

最新推荐文章于 2024-11-07 13:56:28 发布

阅读量173

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/weixin_42229667/article/details/105107887

版权

## 定位

**position**属性用于指定一个元素在文档中的定位方式。`top`，`right`，`bottom`和 `left`属性则决定了该元素的最终位置

语法：`position: 属性值;`

* static（静态定位）：默认值，该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 `top`, `right`, `bottom`, `left` 和 `z-index `属性无效。

* relative（相对定位）：相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。相对定位的元素并未脱离文档流，保留空间。

* absolute（绝对定位）：相对于最近的**非 static** 定位祖先元素的偏移，来确定元素位置（如果这个非 static 定位祖先元素不存在，就相对于根节点进行定位）。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。绝对定位的元素脱离了文档流，不占据空间。

* fixed（固定定位）：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。当元素祖先的 `transform` 属性非 `none` 时，容器由视口改为该祖先。

* sticky（粘性定位）：粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。该定位基于用户滚动的位置，它不会对后续元素的定位造成影响。

| 定位类型 | 位置 | 是否脱离文档流 |

| -------- | -------------------------- | -------------- |

| static | 正常文档流位置 | 否 |

| relative | 相对原来的位置 | 否 |

| absolute | 相对非static定位的祖先元素 | 是 |

| fixed | 相对于视口 | 是 |

## 定位层级 z-inex

指定了一个具有定位（非static）属性的元素及其子代元素。当元素之间重叠的时候，z-index决定哪一个元素覆盖在其余元素的上方显示。通常来说 z-index 较大的元素会覆盖较小的一个。

语法：`z-index: 属性值;`

属性值可以是：

* auto 。（默认值），堆叠顺序与父元素相等。

* 数字。无单位的整数值。可为负数，数值越大，堆叠顺序越靠上。

## 包含块

一个元素的尺寸和**位置**经常受其包含块的影响。对于一些属性，例如 `width`, `height`, `padding`, `margin`，绝对定位元素的偏移值（比如 `position`) 被设置为 `absolute` 或 `fixed`），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。