面试官：介绍一下CSS定位？absolute和relative分别依据什么定位？

原创

已于 2023-09-01 18:27:10 修改 · 979 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-09-01 14:08:08 首次发布

本文详细介绍了CSS中的position属性及其取值（static、relative、absolute、fixed和sticky），包括它们的定位方式、特点、层叠顺序以及在网页设计中的应用场景，如遮罩层、网页挂件和粘性导航。

能说服一个人的，从来不是道理，而是南墙。

一、position属性介绍

取值	名称	效果
static	静态定位(默认值)	元素按照标准流布局 (不脱标) , top、bottom、left 、right等属性不起作用
relative	相对定位	元素按照标准流布局 (不脱标) ，可以通过top、bottom、left 、right进行定位，定位参照对象是自身在标准流布局中的位置
absolute	绝对定位	元素脱离标准流（脱标），可以通过top、bottom、left 、right进行定位，定位参照对象是最邻近的祖先定位元素，如果找不到这样的父级元素，参照对象是视口。定位元素（positioned element），position值不为static的元素，也就是position值为relative、absolute、fixed的元素
fixed	固定定位	元素脱离标准流（脱标），可以通过top、bo