有关位置属性的所有提示，可避免常见错误

嘿伙计们！

我想谈谈position属性！我们会考虑所有让开发者感到困惑的细节。此外，我还创建了Live Cheatsheat（实时速查）。用它来进行深度学习吧！

但在开始阅读之前，我在我的 Substack 简报上留下了关于 CSS 的链接。你知道该怎么做了😎

另外，非常感谢我的赞助商：Ben Rinehart、Sergio Kagiema、Jesse Willard、Tanya Ten、Konstantinos Kapenekakis。没有他们的支持，我不可能写出这篇文章。

我们走吧！

位置：绝对

块值

注意！我指的是 block、flex、grid 和 table 的值。

1.当我们为所有子项添加position:absolute时，它们会脱离父项，即其height属性将设置为0px。

如果将position:absolute设置为children的一部分，则父级高度将根据没有position:absolute的children的高度来计算。

2.添加position: absolute不会改变显示计算值。所有值都会被保存。

3.具有position: absolute的元素的width和height属性是根据内容计算的。因此，具有display: block的元素的width属性不会填充文本方向的所有可用空间。

4.由于宽度和高度属性可以应用于具有块值的元素，因此当我们向它们添加position：absolute时，我们不会发生一些变化。

5.添加position:absolute后，元素的padding和border属性保持不变。

具有块级值的元素的外边距折叠功能将停止工作。垂直外边距不会超出父元素。元素之间的外边距不会折叠。

6.带有块级值的元素默认定位在一列中。添加position: absolute后，它们将根据定义的算法进行移动。

HTML 中的第一个元素保存了起始位置。其余元素会以上下移动的方式移动。HTML 中的第一个元素位于底部，最后一个元素位于顶部。

具有位置：absolute 的元素不能与位于其之前的不具有位置：absolute 的邻近元素重叠。

第一个具有position: absolute的元素将位于最后一个未指定position: absolute的元素之后。其他相邻的具有position: absolute的元素将与第一个元素重叠。

具有位置：absolute 的元素会与邻近元素重叠，因为它们会发生偏移。偏移的间隙等于所有具有位置：absolute 的元素大小之和。

内联值

注意！我指的是 inline、inline-block、inline-flex、inline-grid 和 inline-table 值。

7.与块值一样，当向所有子项添加位置：绝对值时，父级高度设置为 0px。

当为子项的一部分添加位置：绝对位置时，父级高度将根据没有位置：绝对位置的子项的高度来计算。

8.所有内联值都将更改为块值。因此，inline 和 inline-block 将更改为 block，inline-flex 将更改为 flex，inline-grid 将更改为 grid，inline-table 将更改为 table。

9.默认情况下，带有 display: inline 的元素的 width 和 height 属性会根据内容计算。该行为保留，但在添加position: absolute后，这些属性的 auto 值将更改为像素。

10.这些属性不能应用于 display: inline 的元素。但添加position: absolute可以改变这种情况。它们会被应用。

但这些属性会应用于所有其他 inline-* 值的元素。因此，添加position: absolute后不会有任何变化。

11.具有 display: inline 的元素的垂直填充、边框和边距在添加position: absolute后将停止超出父级。

具有 display: inline-* 的元素的相同属性不会超出父级。因此，添加position: absolute后不会有任何变化。

12. display 属性值为 inline 的元素默认定位在一行中。添加position: absolute后，它们的移动方式与值为 block 的元素相同。

它们会相互显示。第一个元素位于底部，最后一个元素位于顶部。

它们也不能与之前的元素重叠。第一个具有position: absolute的元素将位于最后一个不具有position: absolute的元素之后。其他相邻的具有position: absolute的元素将与第一个元素重叠。

当为某些元素添加position: absolute时，其余元素将会偏移。它们也会重叠。

弹性项目

13.当为 Flex 项目添加位置：absolute 时，它​​们将停止沿附加轴拉伸。

14.在为弹性项目添加位置：absolute的情况下，它们将相互重叠。

HTML 中的第一个元素保存了起始位置。其余元素会以上下移动的方式移动。HTML 中的第一个元素位于底部，最后一个元素位于顶部。

具有position: absolute的元素可以与任何位于其前后的元素重叠。它们会移动到轴的起始位置并排列成一列。

15.如果我们为弹性项目定义了宽度和高度属性，则在为它们添加位置：绝对位置后，不会发生任何变化。

16.在为弹性项目添加位置：绝对值时，填充、边框和边距属性将继续起作用而无需进行任何更改。

位置：固定

各位，我在示例中使用 filter: opacity(1) 禁用了相对于视口的默认位置，因为这有助于我展示其他行为的细微差别。更多详情，请参阅“值”部分中的固定值。

块值

注意！我指的是 block、flex、grid 和 table 的值。

1.当我们为所有子项添加position:fixed时，它们会脱离父项，即其height属性将设置为0px。

如果将position:fixed设置为children的一部分，则父级高度将根据没有position:fixed的children的高度来计算。

2.添加position:fixed不会改变显示计算值。所有值都会被保存。

3.带有position:fixed的元素的width和height属性是根据内容计算的。因此，带有display:block的元素的width属性不会填充文本方向的所有可用空间。

4.由于宽度和高度属性可以应用于具有块值的元素，因此当我们向它们添加位置：固定时，我们不会发生一些变化。

5.添加position:fixed后，元素的padding和border属性无需改变即可生效。

具有块级值的元素的外边距折叠功能将停止工作。垂直外边距不会超出父元素。元素之间的外边距不会折叠。

6.具有块级值的元素默认定位在一列中。添加position:fixed后，它们将根据定义的算法进行移动。

HTML 中的第一个元素保存了起始位置。其余元素会以上下移动的方式移动。HTML 中的第一个元素位于底部，最后一个元素位于顶部。

具有位置：fixed 的元素不能与位于其之前的不具有位置：fixed 的邻近元素重叠。

第一个带有position:fixed的元素将位于最后一个不带position:fixed的元素之后。其他邻近带有position:fixed的元素将与第一个元素重叠。

具有position:fixed的元素会与相邻元素重叠，因为它们会移动。移动的间隙等于所有position:fixed元素大小的总和。

内联值

注意！我指的是 inline、inline-block、inline-flex、inline-grid 和 inline-table 值。

7.与块值一样，当向所有子项添加位置：固定时，父级高度设置为 0px。

当为部分子项添加位置：固定时，父项高度将根据没有位置：固定的子项的高度来计算。

8.所有内联值都将更改为块值。因此，inline 和 inline-block 将更改为 block，inline-flex 将更改为 flex，inline-grid 将更改为 grid，inline-table 将更改为 table。

9.默认情况下，带有 display: inline 的元素的 width 和 height 属性会根据内容计算。该行为保留，但在添加position: fixed后，这些属性的 auto 值将更改为像素。

10.这些属性不能应用于 display: inline 的元素。但添加position:fixed可以改变这种情况。它们会被应用。

但这些属性会应用于所有其他 inline-* 值的元素。因此，添加position:fixed后不会产生任何变化。

11.具有 display: inline 的元素的垂直填充、边框和边距在添加position: fix后将停止超出父级。

具有 display: inline-* 的元素的相同属性不会超出父级。因此，添加position: fixed后不会有任何变化。

12. display 属性值为 inline 的元素默认定位在一行中。添加position:fixed后，它们的移动方式与块级属性值的元素相同。

它们会相互显示。第一个元素位于底部，最后一个元素位于顶部。

它们也不能与之前的元素重叠。第一个带有position:fixed的元素将位于最后一个不带有position:fixed的元素之后。其他相邻的带有position:fixed的元素将与第一个元素重叠。

当为某些元素添加position:fixed时，其余元素将会移动。它们也会重叠。

弹性项目

13.当为 Flex 项目添加位置：fixed 时，Flex 项目将停止通过附加轴进行拉伸。

14.在为弹性项目添加位置：fixed 的情况下，它们将相互重叠。

HTML 中的第一个元素保存了起始位置。其余元素会以上下移动的方式移动。HTML 中的第一个元素位于底部，最后一个元素位于顶部。

带有position:fixed的元素可以与任何相邻元素重叠，这些元素可能位于它们之前或之后。它们会移动到轴的起始位置，并排成一列。

15.如果我们为弹性项目定义了宽度和高度属性，则在为它们添加位置：固定后，不会发生任何变化。

16.在为弹性项目添加位置：固定时，填充、边框和边距属性将继续起作用而无需进行任何更改。

位置：相对

块值

注意！我指的是 block、flex、grid 和 table 的值。

1.当我们为所有子元素添加position:relative时，没有任何变化。父元素的高度仍然根据子元素的高度计算。

如果我们添加位置：相对于子项的一部分，那么就会起作用。

2.添加position:relative不会改变显示计算值。所有值都会被保存。

3、 width、height属性的工作原理保留默认。

带有 display: table 属性的元素与其他值不同。width 属性未填满所有可用空间。添加position:relative 属性不会对其产生影响。

4.由于宽度和高度属性可以应用于具有块值的元素，因此当我们向它们添加位置：相对时，我们不会发生一些变化。

5.添加position:relative后，元素的padding和border属性保持不变。

具有块级值的元素的外边距折叠也有效。垂直外边距超出父元素。元素之间的外边距折叠。

6.添加position:relative时，具有块值的元素会一个位于另一个之下。

具有位置：相对的元素不能与其之前或之后不具有位置：相对的邻近元素重叠。

内联值

注意！我指的是 inline、inline-block、inline-flex、inline-grid 和 inline-table 值。

7.与添加位置时的块值一样：相对于所有子项，父项高度是根据子项的高度计算的。

如果添加位置：相对于子项的一部分，则该行为将被保存。

8.所有内联值都不会在块值上发生改变，例如添加位置：绝对或固定时。

9.默认情况下，带有 display: inline 的元素的 width 和 height 属性会根据内容进行计算。此行为会被保存，且计算值不会改变。

10.这些属性不能应用于 display: inline 的元素。添加position:relative 不会改变这一点。

这些属性也适用于所有其他 inline-* 值的元素。因此，添加position:relative后不会发生任何变化。

11.具有 display: inline 的元素的垂直填充、边框和边距在添加position:relative后继续延伸到父级之外。

具有 display: inline-* 的元素的相同属性不会超出父级。因此，添加position:relative后不会有任何变化。

12. display 属性值为内联值的元素默认定位在一行中。添加position:relative后，该行为将被保留。

它们也不能与之前和之后的元素重叠。

弹性项目

13.当为 Flex 项目添加位置：relative 时，Flex 项目会继续沿附加轴拉伸。

14.添加position:relative后flex项目按主轴定位。

具有位置：相对的元素不能与其之前或之后的任何附近元素重叠。

15.如果我们为弹性项目定义了宽度和高度属性，则在为它们添加位置：相对后，我们将不会得到任何变化。

16.在添加位置：相对于弹性项目时，填充、边框和边距属性将继续工作而无需进行任何更改。

位置：静态

块值

注意！我指的是 block、flex、grid 和 table 的值。

1.当我们为所有子元素添加position: static时，我们不会得到任何变化。父元素的高度仍然根据子元素的高度计算。

如果我们为子项的一部分添加位置：静态，那么就会起作用。

2.添加position: static不会改变显示计算值。所有值都会被保存。

3、 width、height属性的工作原理保留默认。

带有 display: table 属性的元素与其他值不同。width 属性未填满所有可用空间。添加position: static 属性不会对其产生影响。

4.由于宽度和高度属性可以应用于具有块值的元素，因此当我们向它们添加position：static时，我们不会发生一些变化。

5.添加position:static后，元素的padding和border属性无需改变即可生效。

具有块级值的元素的外边距折叠也有效。垂直外边距超出父元素。元素之间的外边距折叠。

6.添加position：块值的静态元素会一个接一个地定位。

具有位置：静态的元素不能与其之前或之后不具有位置：静态的邻近元素重叠。

内联值

注意！我指的是 inline、inline-block、inline-flex、inline-grid 和 inline-table 值。

7.与块值一样，当向所有子项添加位置：静态时，父项高度是根据子项的高度计算的。

如果将位置：静态添加到子项的一部分，则可以保存该行为。

8.所有内联值都不会在块值上发生改变，例如添加位置：绝对或固定时。

9.默认情况下，带有 display: inline 的元素的 width 和 height 属性会根据内容进行计算。此行为会被保存，且计算值不会改变。

10.这些属性不能应用于 display: inline 的元素。添加position: static 不会改变这一点。

这些属性也适用于所有其他 inline-* 值的元素。因此，添加position: static后不会产生任何变化。

11.具有 display: inline 的元素的垂直填充、边框和边距在添加position: static后继续延伸到父级之外。

具有 display: inline-* 的元素的相同属性不会超出父级。因此，添加position: static后不会有任何变化。

12. display 属性值为内联值的元素默认定位在一行中。添加position: static后，该行为将被保留。

它们也不能与之前和之后的元素重叠。

弹性项目

13.当为 Flex 项目添加位置：静态时，它们会继续通过附加轴进行拉伸。

14.添加position:static后flex项目按主轴定位。

具有位置：静态的元素不能与其之前或之后的任何附近元素重叠。

15.如果我们为弹性项目定义了宽度和高度属性，则在为它们添加位置：静态后，我们将不会得到任何变化。

16.在为弹性项目添加位置：静态时，填充、边框和边距属性将继续起作用而无需进行任何更改。

位置：粘性

块值

注意！我指的是 block、flex、grid 和 table 的值。

1.当我们为所有子元素添加position:sticky时，没有任何变化。父元素的高度仍然根据子元素的高度计算。

如果我们添加position:sticky到子项的某个部分，那么就会起作用。

2.添加position:sticky不会改变显示计算值。所有值都会被保存。

3、 width、height属性的工作原理保留默认。

带有 display: table 属性的元素与其他值不同。width 属性未填满所有可用空间。添加position: sticky 属性不会对其产生影响。

4.由于宽度和高度属性可以应用于具有块值的元素，因此当我们向它们添加位置：粘性时，我们不会发生一些变化。

5.添加position:sticky后，元素的padding和border属性保持不变。

具有块级值的元素的外边距折叠也有效。垂直外边距超出父元素。元素之间的外边距折叠。

6.添加position:sticky时，具有block值的元素会一个接一个地定位。

具有位置：sticky 的元素不能与其之前或之后不具有位置：sticky 的邻近元素重叠。

内联值

注意！我指的是 inline、inline-block、inline-flex、inline-grid 和 inline-table 值。

7.与块值一样，当向所有子项添加位置：粘性时，父项高度是根据子项的高度计算的。

如果将位置：粘性添加到子项的某个部分，则该行为将被保存。

8.所有内联值都不会在块值上发生改变，例如添加位置：绝对或固定时。

9.默认情况下，带有 display: inline 的元素的 width 和 height 属性会根据内容进行计算。此行为会被保存，且计算值不会改变。

10.这些属性不能应用于 display: inline 的元素。添加position: sticky 不会改变这一点。

这些属性也适用于所有其他具有 inline-* 值的元素。因此，添加position: sticky后不会发生任何变化。

11.具有 display: inline 的元素的垂直填充、边框和边距在添加position: sticky后继续延伸到父级之外。

具有 display: inline-* 的元素的相同属性不会超出父级。因此，添加position: sticky后不会有任何变化。

12. display 属性值为内联的元素默认定位在一行中。添加position: sticky后，该行为将被保留。

它们也不能与之前和之后的元素重叠。

弹性项目

13.当为 Flex 项目添加位置：粘性时，Flex 项目会继续通过附加轴进行拉伸。

14.添加位置后：粘性弹性项目按主轴定位。

具有位置：粘性的元素不能与其之前或之后的任何附近元素重叠。

15.如果我们为弹性项目定义了宽度和高度属性，则在为它们添加位置：粘性后，我们将不会得到任何变化。

16.在为弹性项目添加位置：粘性时，填充、边框和边距属性将继续起作用而无需进行任何更改。