CSS中定位的方式有哪些？position属性的值有哪些？他们之间的区别是什么？

这个题目可能的问法有两种

• CSS中定位的方式有哪些？
• position属性的值有哪些？他们之间的区别是什么？

精简的答案

• 默认值：initial（浏览器默认值）
• 继承父级元素的定位机制：inherit
• 默认：static
• 相对定位：relative
• 绝对定位：absolute（注意z-index）
• 固定定位：fixed
• 粘性定位：sticky该定位基于用户滚动的位置。

详细解说

• initial：设置该属性为浏览器默认值
• inherit ：规定应该从父元素继承 position 属性的值。
• static ：默认值。
  • 没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 
• relative ：生成相对定位的元素，相对于其正常位置进行定位。
  • 因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
• absolute： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  • 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位。
  • 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。fixed旧版本IE不支持
• sticky
  • 粘性定位，该定位基于用户滚动的位置。（特定阈值指的是 top, right, bottom 或 left 之一）
    • 它的行为就像 position:relative; 而当页面滚动超出目标区域时，
    • 它的表现就像 position:fixed;，它会固定在目标位置。
    • 注意: Internet Explorer, Edge 15 及更早 IE 版本不支

更详细的介绍，请参考

CSS position

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！