定位方式
CSS 有三种基本的定位机制：普通流（文档流）、浮动和绝对定位
position 属性共有四种取值：
-
static（默认值）：
即正常文档流的表现形式，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
-
relative（相对定位）:
对于其原本位置进行定位，但是其原来所占用的空间依然存在，即不脱离文档流。如”left:20px” 会使元素的left距离原来的位置添加 20 像素。
-
absolut（绝对定位）:
相对于 static 定位以外的第一个父元素进行定位。脱离文档流，不占据空间，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
-
fixed（绝对定位）:
脱离所有元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
absoult, relative, fixed 偏移的参考点
- absolute：相对于第一个非static 定位的祖先元素进行定位
- relative：相对于其正常位置进行定位
- fixed：相对于浏览器窗口进行定位
使用场景
| 定位方式 | 场景 |
|---|---|
| static | 一般来说不用写，除非是想要覆盖之前设置的定位 |
| relative | 和 absolute 一起使用。常用于 logo 的定位 |
| absolute | 和 relative 一起使用。常用于 logo 的定位 |
| fixed | 广告图片 |
| sticky | 搜索框 |
网友评论