第十章 定位
一,相对定位
写法 :position:relative;
位置 + 参照物
参照物 = 本身
但是我们单纯的给元素设置position:relative;元素是无法进行移动的,还要设置移动属性才可以进行移动.
移动属性
left
right
top
bottom
相对定位的特性
1. 相对自身位置发生移动,元素保留初始位置
首先我们先设置两个盒子:第一个粉盒子添加相对定位然后进行向左200px移动,第二个盒不添加定位,
原始状态
粉盒子200px
这就是相对定位的第一个特性:相对自身位置发生移动,元素保留初始位置
2. 不会脱离文档流,会漂浮
例2
3.支持margin
4不会影响元素本身特性
二,绝对定位
写法:position:absolute;
位置 + 参照物
参照物 = 根据祖先元素是否设置了相对定位来进行移动,如果祖先元素没有设置相对定位,就根据浏览器窗口进行移动
上面这个参照物是什么意思呢?我来解释一波
我们还是先设置一个不添加定位的粉盒子
未添加定位
然后我们将粉盒子设置绝对定位并设置bottom:0px,left:0px.此时我们可能会认为盒子应该在这个红盒子左下角,下面我们来看看是不是这样.
添加绝对定位
结果并不是这样这就是上面所说的根据祖先元素来进行定位
绝对定位的特性:
1.完全脱离文档流,不保留初始位置
例4
2.会转换成块元素(相当于使用display:block) 支持margin,不支持auto
.first .second{
width: 50px;
height: 50px;
background-color: pink;}
<span class="second">
盒子
</span>
我们都知道span元素是行内元素,并且不支持宽高的.而使用绝对定位会将元素转换成块级元素,看下图
例5
3. 父相子绝
什么是父相子绝?
如果我们想要盒子在我们想要的位置进行移动并且不会影响布局,我们就需要在父级添加一个相对定位。
后写覆盖前面(是看html的结构顺序)
.first .second{
width: 50px;
height: 50px;
background-color: pink; 第一个盒子是粉色的
position: absolute;
left: 0px;
top: 0px;
}
.first .three{
width: 50px;
height: 50px;
background-color: green; 第二个盒子是绿色的
position: absolute;
left: 0px;
top: 0px; 下面我们来猜猜是哪个盒子在上面呢?
}
<div class="three">
2
</div>
<div class="second">
1
</div>
例6
是粉盒子,为什么呢?
因为他是看html的顺序先后的,而不是css样式的顺序先后
三,固定定位
写法:position:fixed;
位置 + 参照物
参照物 = 浏览器窗口
特性:
1.以浏览器窗口进行定位,不会随内容进行滚动
2.脱离文档流,不会占据初始位置
这里的两个特性图片演示的效果不明显。
给大家举一个都知道的例子。就是在我们电脑桌面右下角经常会出现弹窗广告，不管我们怎么滑动页面广告一直都在右下角不动，例如：屠龙宝刀，一刀9999。就是用这个固定定位来做的
四，粘性定位
写法:position:sticky;
位置 + 参照物
参照物 = 自身
特性:
1.父元素不能使用auto
2.被限制在父级元素之内
3.能感知到浏览器的顶部,就不会滚动
五,层级问题
层级
写法:z-index:1;
数字越大层级越高
z 表示我们的z轴
只对 relative absolute fixed static sticky 有效
默认样式是:auto;
六,居中
怎么使盒子水平垂直居中
1
给父级添加position:relative;
子级设置position:absolute;上下左右都为0,再加一个margin:auto;
