一、定位基础
1.1 定位的作用
- 吸引用户眼球
- 方便交互
3)并非用来布局,仅仅是盒子的小修饰。
1.2 定位的语法
定位的概念：定位 = 定位模式 + 边偏移
1)边偏移
在 CSS 中，通过 top、bottom、left 和 right 。
2)定位模式
在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：
3)语法
选择器 { position: 属性值; }
| 值 | 语义 | 关键词 | 描述 |
|---|---|---|---|
static |
静态定位 | 不定位 | 所有元素的默认定位方式。 |
relative |
相对定位 | 自恋 | 相对于其原标准流的位置进行定位 |
absolute |
绝对定位 | 拼爹 | 相对于其上一个已经定位的父元素进行定位 |
fixed |
固定定位 | 浏览器 | 相对于浏览器窗口进行定位 |
1.3 静态定位(static)
静态定位是元素的默认定位方式，也就是说网页中所有元素默认都是静态定位的 。按照标准流即可。
1.4 相对定位(relative)
定：以自己的左上为坐标原点开始定位。
位：自身盒子位置保留。
<img src="./media/relative.png">
示例：
/* 红色盒子相对定位移走后,仍然保留位置,绿色盒子位置不会改变。 */
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 100px;
left: 100px;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
<div class="box1">
</div>
<div class="box2">
</div>
1.5 绝对定位(absolute)
定：
如果父类有定位(相对/绝对)以父类为参考坐标。
如果父类没有定位,以浏览器为参考坐标。
位：
不保留自身盒子的位置。
<img src="./media/absolute.bmp">
示例：
/* 红色设置绝对定位后不保留自身位置,绿色位置自动上去。 */
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
<div class="box1">
</div>
<div class="box2">
</div>
1.6 固定定位(fixed)
定：以浏览器为参考坐标,无论是否有父类盒子。
位：不保留自身盒子的位置。
<img src="media/fixed.bmp">
/* 如果没有定位,那么红色在上边,绿色在下边。
固定定位后,红色盒子以浏览器为参考开始定位置,并且自身位置没有了,
于是绿色盒子就上去了
*/
.red {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 100px;
left: 100px;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}
<div class="red">
</div>
<div class="green">
</div>
二、定位扩展
2.1 绝对定位的居中
绝对定位不能通过设置 margin: auto 设置水平居中。但不影响通过margin+方位名词设置外边距。(因为绝对定位不保留位置,所以此时左右的auto不起左右,与之类似的还有浮动,也不能通过 "margin: auto"设置水平居中,因为只能右漂移)
[图片上传失败...(image-a6436e-1520951029482)]
设置水平居中如下,垂直居中与之类似。
1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
2. margin-left: -100px;：让盒子向左移动自身宽度的一半。
2.2 堆叠顺序(z-index)
对于'绝对定位''不保留自身位置,可能会出现盒子重叠的情况。如下所示：
<img src="media/z-index(1).png">
/* 1)绿色绝对定位的盒子与红色出现层叠
2)没有指定z-index属性则按照盒子出现的先后顺序,后来居上。
*/
.red {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.green {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50px;
left: 50px;
}
<div class="red"></div>
<div class="green"></div>
使用z-index属性可以定义层叠等级属性,调整盒子的堆叠顺序。
z-index特性：
- 属性值： 正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上。
- 数字后面不能加单位。
- z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
2.3 行内块元素特性
一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
2.4 定位小结
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位relative | 脱标，占有位置 | 可以 | 相对自身位置移动（自恋型） |
| 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置（拼爹型） |
| 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置（认死理型） |
三、定位应用
3.1 盒子里的小装饰
如下图所示的应用场景，要实现在一个大盒子里有两个'<'和‘>’按钮的功能。
[图片上传失败...(image-717a85-1520951029482)]
分析布局：
1)父盒子插入图片,两个小盒子实现两个箭头。
2)方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
3)父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
4)如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。
5)父级要占有位置，子级要任意摆放，这就是子绝父相的由来。
