从零开始的web前端开发11

定位属性：position，搭配top/left/right/bottom偏移使用

一、静态定位 static

• 默认值，元素正常文档流排布
• 偏移属性无效

position: static;

二、相对定位 relative

1. 参照物：自身原始位置
2. 特点：保留原有占位，不脱离文档流
3. 偏移后仅视觉移动，原位置依旧占用

position: relative;
top: 10px;
left: 20px;

三、绝对定位 absolute

1. 参照物：最近已定位的父级元素
   父级无定位则参照浏览器窗口
2. 特点：脱离文档流，不保留占位
3. 常用搭配：父级设relative，子级设absolute精准定位

/* 父容器 */
.father{position: relative;
}
/* 子元素 */
.son{position: absolute;right: 0;bottom: 0;
}

四、固定定位 fixed

1. 参照物：浏览器视口窗口
2. 特点：脱离文档流，滚动页面位置始终不变
3. 多用于悬浮按钮、导航栏

position: fixed;
bottom: 30px;
right: 30px;

五、锚点跳转

1. 锚记标签设置id

<div id="mao1">锚点区域</div>

2. 跳转链接绑定#加id名

<a href="#mao1">点击跳转到对应位置</a>

3. 页面间锚点：页面地址#id名

速记区分

• relative：占位置，挪自己
• absolute：不占位，找定位父级
• fixed：不占位，固定屏幕不动
• 锚点：id绑定#，实现页内跳转
  注：文章部分内容使用ai润色，主体为课堂笔记