一、定位(position):
定位是一种更加高级的布局手段,通过定位我们可以将一个元素摆放到页面的任意位置
使用position属性来设置定位
可选值:
static:默认值 元素是静止的 没有开启定位
relative:开启元素的相对定位
相对定位的特点:
1.元素开启相对定位以后 如果不设置偏移量(offset) 元素不会发生任何变化
通过偏移量设置元素的位置:
top:定位元素和定位位置上边的距离
bottom:定位元素和定位位置下边的距离
left:定位元素和定位位置左边的距离
right:定位元素和定位位置右边的距离
2.相对定位是参照与元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质 块还是块 行内还是行内
absolute:开启元素的绝对定位
绝对定位特点:
1.开启绝对定位后 如果不设置偏移量 元素位置不会发生变化
2.开启绝对定位后 元素会从文档流中脱离
3.绝对定位会改变元素的性质,行内变成块,块的宽高被内容撑开
4.绝对定位会使元素提升层级
5.绝对定位是相对于其包含块进行定位的
包含块(containing block):
正常情况下包含块就是离当前元素最近的祖先块元素
绝对定位的包含块: 离它最近的开启定位的祖先元素
如果所有的祖先元素都没有开启定位
则相对于根元素进行定位
html(根元素,初始包含块)
fixed:开启元素的固定定位
固定定位也是一种绝对定位 所以固定定位的大部分特点和绝对定位一样
唯一不同的是 固定定位永远参照于浏览器的视口(浏览器可视窗口)进行定位
固定定位的元素不会随滚动条滚动上去 而是跟随可视窗口的移动而移动
sticky:开启元素的粘滞定位
粘滞定位的特点和相对定位基本一样
粘滞定位可以在元素到达某个位置时固定
二、绝对定位的元素布局
开启定位后的等式:
left+margin-left+border-left+padding-left+width+padding-left+width+padding-right+margin-right+right=包含块内容区的宽度
当开启绝对定位后:
水平方向的布局等式就要添加left和right两个值
此时规则和之前一样只是多添加了两个值
当发生过渡约束时:
如果九个值中没有auto则自动调整right值
以使等式满足
如果有auto则自动调整auto的值以使等式满足
可以设置auto的值:margin width left right
left和right的值默认是auto 则等式不满足时,会自动调整这两个值
垂直方向布局的等式也必须要满足:
top+margin-top+margin-bottom+padding—top/bottom+border-top/bottom+height+bottom=包含块的高度
以下设置可以让元素水平垂直都居中:
left: 0;
right: 0;
top: 0;
bottom: 0;
三、元素的层级
对于开启定位的元素,可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数,值越大的元素的层级越高
元素层级越高的越优先显示
如果元素层级一样 则优先显示靠下的
祖先元素层级再高,不会盖住后代元素
垂直水平居中的几种方法
第一种:盒子宽高 + margin
思路 :上外边距为自身高度一半,左外边距为自身宽度一半:
.box {
width: 800px;
height: 400px;
border: 1px solid black;
}
.son {
width: 400px;
height: 200px;
margin-top: 100px; /* 上外边距为自身高度一半 */
margin-left: 200px; /* 左外边距为自身宽度一半 */
border: 1px solid red;
}
第二种:盒子宽高 + 定位 + margin
思路 1 :给父盒子加相对定位,给子盒子加绝对定位,再设置子盒子相对于父盒子的边偏移:top:50%,left:50%;然后设置左外边距为自身宽度一半,上外边距为自身高度一半
.box {
position: relative;
width: 800px;
height: 400px;
border: 1px solid black;
}
.son {
position: absolute;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
border: 1px solid red;
}
第三种:Felx
思路:
justify-content:center;设置flex盒子中的项目在主轴上居中对齐
align-items:center;设置flex盒子中的项目在侧轴和主轴上居中对齐
主轴和侧轴都居中了,盒子也就水平垂直居中了
.box {
display: flex;
justify-content: center; /* 设置flex盒子中的项目在主轴上居中对齐 */
align-items: center; /* 设置flex盒子中的项目在侧轴和主轴上居中对齐 */
width: 800px;
height: 400px;
border: 1px solid black;
}
.son {
width: 400px;
height: 200px;
border: 1px solid red;
}