Hongbusi
commented
2 years ago 还得是 @alexzhang1030 👍🏻。
下面讲一下在我面试别人的时候，期望得到的答案。
主要是介绍每种定位相对于谁进行定位：
static：静态定位，出现在正常的文档流中；relative:：相对定位，相对于其自身位置进行定位；absolute：绝对定位, 相对于非static定位 的第一个父级元素进行定位；fixed：固定定位，相对于浏览器窗口进行定位；sticky：粘性定位，static和fixed的结合, 相对于浏览器窗口定位。
这里有一个主要的考察点，也是最容易出错的的地方：absolute 相对于谁进行定位的问题？
有很多人会回答说子绝父相，这个回答是错误的。而是相对于非 static 定位 的第一个父级元素进行定位。
关于 CSS 定位
可以通过
position关键字来指定某个元素的定位属性。通过top,left,right,button来指定此元素的定位位置。position 关键字可以接受以下值：
staticrelativeabsolutefixedsticky下面，我们就每一项来展开说一说
语法
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优先选择topleft、right，当direction属性设置为ltr的时候，left 优先，若设置为rtl，则 right 优先引用