本文介绍了前端开发中的定位技术，包括相对定位、绝对定位和固定定位的概念、用途和示例。相对定位用于微调元素位置，保持文档流；绝对定位脱离标准文档流，基于最近的定位祖先元素定位；固定定位则始终相对于浏览器窗口定位，不受滚动影响。文章还提到了作者的社区TFS-CLUB和白宝书系列资源。
- 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
- 福利：除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外，还可以通过加入星荐官共赢计划 加入私域社区。
- 当前子专栏 基础入门三大核心篇 也是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益。
- 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。
- 荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划” 发起人。
- 现象级专栏《白宝书系列》作者，文章知识点浅显易懂且不失深度；TFS-CLUB社区创立者，旨在以“赋能 共赢”推动共建技术人成长共同体。
- 🏆 白宝书系列
文章目录
页面布局时常用到定位，用来给元素安排它的位置。定位又分为相对定位、绝对定位和固定定位。
⭐️ 相对定位
相对定位：盒子可以相对自己原来的位置进行位置调整。
相对定位：postion: relative;，还有四个描述词：left向右移动、right向左移动、bottom向上移动、top向下移动。
值可以为负数，即可以往规定方向相反移动。
下面看个例子：
🌟 相对定位的性质
相对定位的元素，会在”老家留坑“，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成”影子“，不会对页面其他元素产生任何影响。
下面看个例子：
🌟 相对定位的用途
- 相对定位用来微调元素位置，不能用来进行太大的位置调整
- 相对定位的元素，可以当作绝对定位的参考盒子（后面再讲）
下面看个导航条的例子来说明相对定位的实际应用：
首先做一个导航条，展示成如下效果：
这样的效果并不满意，我们希望它的上边框是在导航条的上面的，而不是展示在下面。此时就用到相对定位：
相对定位对边框的位置微调后：
代码如下：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
nav {
margin: 40px auto;
width: 1600px;
height: 40px;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
width: 200px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: orange;
}
nav ul li a {
display: block;
width: 200px;
height: 40px;
color: white;
text-decoration: none;
}
nav ul li a:hover {
border-top: 5px solid red;
position: relative;
top: -5px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
</ul>
</nav>
</header>
</body>
</html>
⭐️ 绝对定位
绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置。
绝对定位：postion: absolute;，还也有四个描述词：top到上边的距离、left到左边的距离、right到右边的距离、bottom到下边的距离
也可以用bottom和right来描述绝对位置，这是浏览器的坐标系方向会发生变化：
当然我们也可以使用top和right或者bottom和left，我们只需要用一个上下方向和一个左右方向的描述词搭配使用就可以了。
🌟 绝对定位脱离标准文档流
----重要----
绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖!
下面看个例子：
脱离标准文档流的方法：浮动、绝对定位、固定定位（后面再讲）。
🌟 绝对定位的参考盒子
绝对定位并不是永远以浏览器作为基准点
绝对定位的盒子会以自己祖先元素中，**离自己最近**的拥有定位属性的盒子，当作基准点。这个盒子通常是相对定位的，所以这个性质也叫做”子绝父相“。
下面看个例子：
父亲有”定位属性“，则以父亲为基准进行绝对定位（忽略父亲的padding）:
也会有”子绝父绝“的情况，这种情况相当于父子都处于飘忽的状态，所以这种情况并不常见。
🌟 盒子垂直居中
终于讲到了盒子的垂直居中，我们已经早已学会了盒子的水平居中：margin: 0 auto;
盒子的垂直居中的设置方法：
position: absolute;
top: 50%;
margin-top: -自己高度一半;
下面直接看例子：
在绝对定位的基础上实现水平居中，不能再使用margin: 0 auto了，因为一但设置了绝对定位，就脱离了标准文档流。
那么怎么设置水平居中呢？其实和垂直居中的方式类似：
大家可以算一下为什么这么设置之后，盒子会居中。
🌟 堆叠顺序z-index属性
z-index用来设置绝对定位元素的压叠顺序。
z-index属性是一个没有单位的正整数，数值大的能够压住数值小的
下面直接看例子：
🌟 绝对定位的用途
绝对定位的用途
- 绝对定位用来制作”压盖“、”遮罩”效果
- 绝对定位用来结合css精灵使用（后面再讲）
- 绝对定位可以结合JS实现动画
下面我们来看一个轮播图的例子：
轮播图很常见，比如下面这个，轮播图上包含左右箭头，还有右下方的小圆点。
第一步：编写轮播图的盒子：两遍的箭头用a标签实现，小圆点用列表实现。
第二步：给左右箭头书写css样式。利用“子绝父相”放在轮播图两侧。
注意：绝对定位的元素是可以直接设置宽度和高度的。下面的a标签因为设置了绝对定位，所以可以直接给它设置宽高。
第三步：给小圆点书写小圆点样式。利用“子绝父相”放在轮播图右下方。
⭐️ 固定定位
固定定位：不管浏览器的滚轮怎么卷动，它永远固定在那里。看起来就像是 “悬停” 在那里。
固定定位：position: fixed。和绝对定位的位置元素
固定定位注意事项：
- 固定定位只能以浏览器为基准点，没有子固父相性质。
- 固定定位也脱离标准文档流。
600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
