谈谈你对定位的认识？

[Hongbusi]

No description provided.

[alexzhang1030]

关于 CSS 定位

可以通过 position 关键字来指定某个元素的定位属性。通过 top, left, right, button 来指定此元素的定位位置。

position 关键字可以接受以下值：

• static
• relative
• absolute
• fixed
• sticky

下面，我们就每一项来展开说一说

语法

static

指定元素 position: static, 该元素将仍旧处于文档流中的位置，此时 top, left, right, bottom 属性无效

relative

指定元素 position: relative, 元素将会先保留原有位置。

在不影响页面布局的情况下通过设定的 top, left, right, bottom 属性来指定元素的位置。同时，元素原来的位置将留白。

absolute

指定元素 position: absolute, 元素将会脱离文档流，并且元素的原有位置将不会留位置。

通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed

指定元素 position: fixed, 元素将会脱离文档流，并且元素的原有位置将不会留位置。

通过元素相对于屏幕视口的距离来计算元素的位置。元素的位置在滚动时不会发生改变。

fixed 的元素将会创建新的层叠上下文，当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

sticky

指定元素 position: sticky, 元素根据正常的文档流来定位位置，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括 table-related 元素，基于 top, right, bottom, 和 left 的值进行偏移。

偏移值不会影响任何其他元素的位置。

sticky 会被成为粘性定位，具体的表现可以想象为，在滚动时，若 sticky 的元素未超出参考元素的边界，那么他会根据指定的偏移值来维持，且不受其他元素和滚动的影响。

定位类型

• 定位元素，除了 static 之外都是定位元素
• 相对定位元素，relative 的元素
• 绝对定位元素，absolute 的元素
• 粘性定位元素，sticky 的元素

特殊表现

关于元素

大多数情况下，width、height 为 auto 的元素，会按照内容大小自动调整尺寸，但是被绝对定位的元素可以指定 top、left，保留 height: auto，来填充可用的垂直空间。或者反之，保留 width: auto，来填充可用的水平空间。

关于位置

• 如果同时指定了 top、bottom，且值不是 auto 优先选择 top
• 如果同时指定了 left、right，当 direction 属性设置为 ltr 的时候，left 优先，若设置为 rtl，则 right 优先

引用

• MDN

[Hongbusi]

还得是 @alexzhang1030 👍🏻。

下面讲一下在我面试别人的时候，期望得到的答案。

主要是介绍每种定位相对于谁进行定位：

• static：静态定位，出现在正常的文档流中；
• relative:：相对定位，相对于其自身位置进行定位；
• absolute：绝对定位, 相对于非 static 定位 的第一个父级元素进行定位；
• fixed：固定定位，相对于浏览器窗口进行定位；
• sticky：粘性定位，static 和 fixed 的结合, 相对于浏览器窗口定位。

这里有一个主要的考察点，也是最容易出错的的地方：absolute 相对于谁进行定位的问题？

有很多人会回答说子绝父相，这个回答是错误的。而是相对于非 static 定位 的第一个父级元素进行定位。