深入掌握CSS定位：构建精密布局的核心技术
一、定位的定义
定位（Positioning）是CSS中用于控制元素在网页中的具体位置的一种机制。通过定位，可以将元素放置在页面的任意位置，并控制其与其他元素的层叠关系。
二、定位的特点与作用
-
自由摆放位置：
允许元素摆放在网页的任意位置，不受标准流或Flex布局的限制。 -
解决层叠问题：
定位后的元素层级较高，可以覆盖在其他未定位的元素之上。 -
固定位置显示：
可以让元素始终固定在浏览器窗口的某个位置，不随页面滚动而移动。
三、常用的定位类型
3.1、不同定位总视图
| 定位类型 | 属性值 | 参照物 | 是否脱标 | 显示模式变化 | 常见用途示例 |
|---|---|---|---|---|---|
| 相对定位 | relative | 元素自身原来的位置 | 否 | 无 | 微调元素位置，作为绝对定位的祖先容器 |
| 绝对定位 | absolute | 最近已定位的祖先元素或视口 | 是 | 类似 inline-block | 精确定位子元素，实现弹出菜单等效果 |
| 固定定位 | fixed | 浏览器视口 | 是 | 类似 inline-block | 固定导航栏、返回顶部按钮等 |
3.2、相对定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>相对定位示例</title><style>/* 相对定位：1、相对与自身原来的位置 2、相对定位不会脱标 */.box1 {width: 200px;height: 200px;background-color: lightblue;position: relative; /* 启用相对定位 */top: 50px;left: 100px;}.box2{width: 200px;height: 200px;background-color: lightblue;position: relative; /* 启用相对定位 */left: 200px;}</style>
</head>
<body><div class="box1">相对定位的盒子1</div><div class="box2">相对定位的盒子2</div>
</body>
</html>
相对定位特点：
1、相对与自身原来的位置
2、相对定位不会脱标
3.3、绝对定位
父容器没有定位时：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>绝对定位示例</title><style>/* 绝对定位：1、相对与父容器的定位（当父容器中没有其他定位的时候，父容器有定位时以有定位的父容器作为参照物）2、不会脱标 */.parent {width: 500px; height: 500px;background-color: #95d349;position: relative; /* 父容器使用相对定位 */margin: 100px auto;}.child1 {width: 200px;height: 200px;background-color: lightcoral;position: absolute; /* 子元素使用绝对定位 */top: 50px;left: 50px;}.child2 {width: 200px;height: 200px;background-color: lightcoral;position: absolute; /* 子元素使用绝对定位 */top: 100px;left: 100px;}</style>
</head>
<body><div class="parent"><div class="child1">绝对定位的子盒子1</div><div class="child2">绝对定位的子盒子2</div></div>
</body>
</html>
父容器有定位的时（子绝父相）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位（子绝父相）</title><style>* {margin: 0;padding: 0;}img {width: 400px;}.news {position: relative;border: 1px solid #000000;margin: 100px auto;width: 400px;height: 350px;background-color: #f8f8f8;}/* 1. 脱标，不占位2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置3. 显示模式特点改变：宽高生效（具备了行内块的特点）*/.news span {position: absolute;top: 0;right: 0;/* display: block; */width: 92px;height: 32px;background-color: rgba(0,0,0,0.6);text-align: center;line-height: 32px;color: #fff;}</style>
</head>
<body><div class="news"><img src="./images/news.jpg" alt=""><span>展会活动</span><h4>2222世界移动大会</h4></div>
</body>
</html> 
绝对定位特点：
1. 脱标，不占位
2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置
3. 显示模式特点改变：宽高生效（具备了行内块的特点）
3.4、固定定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>固定定位示例</title><style>body {height: 2000px; /* 让页面可以滚动 */}.fixed-nav {width: 100%;height: 60px;background-color: #333;color: white;text-align: center;line-height: 60px;position: fixed; /* 固定定位 */top: 0;left: 0;z-index: 1000; /* 保证在其他内容之上 */}</style>
</head>
<body><div class="fixed-nav">我是固定导航栏</div><p style="margin-top: 80px;">向下滚动看看效果吧...</p>
</body>
</html>
四、定位居中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>58-定位居中</title><style>img {/* 1、绝对定位 */position: absolute;/* 2、水平、垂直边偏移为50% */top: 50%;left: 50%;/* 3、子级向左、上移动自身尺寸的一半 *//* margin-top: -127px;margin-left: -265px; *//* 更方便，此时的50%就是自己宽度的一半 */transform: translate(-50%, -50%);}</style>
</head>
<body><img src="./images/login.webp" alt="">
</body>
</html> 
transform: translate(-50%, -50%);能够快速设置设置元素的居中。
五、z-index堆叠层级
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>堆叠层级</title><style>/* 定位的层叠属性默认为后来者居上，想要改变的话可以添加z-index属性值改变 */div{position: absolute;width: 200px;height: 200px;}.box1{background-color:pink;/* 取值是整数，默认是0，取值越大显示顺序越靠上 */z-index:1}.box2{z-index: 0;background-color: skyblue;left:100px;top:100px;}.box3{z-index: 2;background-color: yellow;left:200px;top:200px;}</style>
</head>
<body><div class="box1">div1</div><div class="box2">div2</div><div class="box3">div3</div>
</body>
</html>
六、总结
常用定位：
| 定位类型 | 属性值 | 参照物 | 是否脱标 | 显示模式变化 | 常见用途示例 |
|---|---|---|---|---|---|
| 相对定位 | relative | 元素自身原来的位置 | 否 | 无 | 微调元素位置，作为绝对定位的祖先容器 |
| 绝对定位（子绝父相） | absolute | 最近已定位的祖先元素或添加了定位的视口 | 是 | 类似 inline-block | 精确定位子元素，实现弹出菜单等效果 |
| 固定定位 | fixed | 浏览器视口 | 是 | 类似 inline-block | 固定导航栏、返回顶部按钮等 |
定位居中：
transform: translate(-50%, -50%);
z-index堆叠层级:
取值是整数，默认是0，取值越大显示顺序越靠上