H5零基础-定位模式
定位的使用场景：
京东.png
淘宝.png
以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。
定位可以让盒子自由的在某个盒子内移动位置 或 固定屏幕中某个位置，并可以压住其它盒子。
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式 用于指定一个元素在文档中的定位方式。
边偏移则决定了钙元素的最终位置。
一、定位模式
position : static | absolute | fixed | relative
定位模式决定元素的定位方式，它通过CSS的position属性来设置，有以下四个值：
| 值 | 语义 |
|---|---|
static |
静态定位 |
relative |
相对定位 |
absolute |
绝对定位 |
fixed |
固定定位 |
1.1 静态定位 static (了解)
静态定位是元素的默认定位方式，无定位的意思。
语法：
选择器 {position : static ;}
静态定位特点：
- 静态定位按照标准流特性摆放位置，它没有边偏移
- 静态定位在不居中很少用到。
1.2 相对定位 relative
相对定位是元素在移动位置的时候，是相对于原来的位置来说的。[自恋型]
语法：
选择器 {position : relative ;}
示例代码：
<style>
.box1 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
运行效果图：
image.png
运行效果分析图：
image.png
相对定位的特点：(重要)
- 它是相对于自己原来的位置来移动的(
移动位置的时候参照点是自己原来的位置) -
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来位置) - 相对位置没有投标。
1.3 绝对定位 absolute （重要）
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。[拼爹型]
语法：
选择器 {position : absolute ;}
示例代码1：(没有祖先元素或者祖先元素没有定位)
<style>
.son {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div class="son"></div>
运行效果：
image.png
示例代码2：[祖先元素有定位(相对、绝对、固定定位)]
<style>
.father {
position: relative;
width: 500px;
height: 500px;
background-color: deeppink;
}
.son {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div class="father">
<div class="son"></div>
</div>
运行效果：
image.png
绝对定位的特点： (非常重要)
- 1.如果
没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档) - 2.如果
祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。 - 3.绝对定位
不在占有原先的位置。(脱标)
⚠️相对定位relative vs 绝对定位absolute ⚠️
-
子级是绝对定位的话，父级要用相对定位；[子绝 父相] -
子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子； - 父盒子需要加定位限制子盒子在父盒子内显示；
小结：因为父级需要占有位置，因此是相对位置，子盒子不需要占有位置，则是绝对定位。
当然，子绝父相不是永恒不变的，如果父元素不需要占有位置，子绝父绝也会用到。
1.4 固定定位 fixed
固定定位是元素固定于浏览器可视区域的位置。
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器 {position : fixed ;}
固定定位的特点: (非常重要)
1.以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系；
- 不随滚动条滚动。
2.固定定位不在占有原先的位置
- 固定定位也是
脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
1.5 粘性定位 sticky （了解）
粘性定位可以被认为是相对定位和固定定位的混合。
语法：
选择器 {position : sticky ; top:10px; }
示例代码：
<style>
body {
height: 3000px;
}
.nav {
position: sticky;
top: 0;
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
<div class="nav">我是导航栏</div>
运行效果：
当向下滑动的时候，导航栏会悬浮到顶部。滑动到最顶部的时候，距离顶部100px。
image.png
image.png
粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)；
- 粘性定位
占有原先的位置(相对定位特点)； - 必须添加top 、left、right、bottom 其中的一个才有效。
- 兼容性查，IE不支持。
定位总结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| static静态定位 | 否 | 不能使用边偏移 | 很少 |
relative相对定位 |
否(占有位置) |
相对资深位置移动 |
常用 |
absolute绝对定位 |
是(不占有位置) |
带有定位的父级 |
常用 |
fixed固定定位 |
是(不占有位置) |
浏览器可视区 |
常用 |
| sticky 粘性定位 | 否(占有位置) | 浏览器可视区 | 较少 |
