1.元素的定位属性
边偏移属性:left、right、top、bottom
定位模式:position:static/relative/absolute/fixed
定位=边偏移+定位模式。
2.静态定位 position:static
静态定位是所有元素的默认定位,使用静态定位,偏移量无法改变元素的位置。静态定位的主要作用是用于消除定位。
3.相对定位 position:relative
使用相对定位可以使用偏移量改变元素的位置,但是原来所占的位置,继续占有,并且每次移动的位置是以自己左上角的基点移动。
注意:相对定位不脱离标准流,会占位置。
div {
background-color: purple;
position: relative;
left: 100px;
top: 150px;
}
4.绝对定位 position:absolute
可以通过偏移移动位置,而且是完全脱标,不占位置。
如果父级元素没有定位,那么子级元素的绝对定位以浏览器为准;
如果父级有定位,那么子级元素以最近已经定位的父级元素为准,父级的定位可以是relative或者absolute,称为子绝父相或者子绝父绝。
使用最多的是 子绝父相。
5.子绝父相
相对定位:占有位置 不脱标
绝对定位:不占有位置 脱标
在页面布局中,经常使用父级是相对定位 子级是绝对定位 例如:页面图片的轮播。
6.利用定位实现水平垂直居中
没有实现定位的盒子居中方法采用的是margin:上下间距 auto;采用定位后,不能够再使用margin方式居中。
水平居中:left:50%;父级元素的50%的位置,margin-left:-本身盒子宽度的一半(width/2);也就是自己再移动50%的距离
垂直居中:top:50%,margin-top:-height/2;
.father {
width: 500px;
height: 500px;
background-color: red;
position: relative; /*父级元素相对定位,占有位置*/
}
.son {
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute; /*子级元素绝对定位,不占有位置*/
/* 水平居中 */
left: 50%;
margin-left: -100px;
/* 垂直居中 */
top:50%;
margin-top: -100px;
}
7.固定定位 position:fixed
固定定位不占有位置,不随着滚动条移动而移动,与父级元素无关,只和浏览器有关,使用固定定位的元素一定要设置宽度和高度,除非有内容撑开。
8.叠加次序
多个元素同时设置定位时,定位元素会出现重叠现象
在CSS中药想调整定位元素的堆叠顺序,可以使用z-index属性取值:负整数/0/正整数 。
9.定位总结
定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准
静态static 不脱标,正常模式 不可以 正常模式
相对定位relative 不脱标,占有位置 可以 相对自身位置移动(自恋型)
绝对定位absolute 完全脱标,不占有位置 可以 相对于定位父级移动位置(拼爹型)
固定定位fixed 完全脱标,不占有位置 可以 相对于浏览器移动位置(认死理型)
10.定位模式转换
使用定位和使用浮动一样,元素会发生模式转换,使用绝对定位和固定定位之后,元素会转换为行内块元素,此时直接给高度和宽度即可,不需要进行模式转换。