定位
- 静态定位static 默认值
- 相对定位relative ：相对自己原始位置 且原始位置仍空置留未脱离
- 绝对定位absolute ：相对于界面 脱离原始位置
- 固定定位fixed：类似广告窗口，固定定位相对位置是当前浏览器界面如果写成绝对定位是针对当前页绝对定位，会随着进度条滚动而变动
- 粘性定位sticky：吸顶效果 模块栏的置顶效果
<style>
div{
width: 120px;
height: 120px;
}
.b1{
background-color: aquamarine;
}
.b2{
background-color: burlywood;
/* position: static; 静态定位*/
/*position: relative; 相对定位 相对自己原始位置 且原始位置仍空置留未脱离
top: 20px; 方向可负值
left: 20px; */
/*position: absolute; 绝对定位 相对于界面 脱离原始位置
top: 150px;
left: 30px; */
}
/* 以下为父子模块绝对定位关系 ,父模块建议相对定位
当子绝对定位父无定位，则子模块自找界面的固定的定位
当父有相对定位，则子的绝对定位相对位置是父模块 */
.b3{
background-color: chartreuse;
position: relative;
}
.b31{
width: 60px;
height: 60px;
background-color: chocolate;
position: absolute;
left: 40px;
top:40px;
}
/* 固定定位*/
.b4{
width: 150px;
height: 150px;
background-color: rgb(176, 176, 236);
position: fixed;
right: 0px;
bottom: 0px;
}
.b5{
width: 300px;
height: 40px;
margin: auto;
background: darkorange;
position: sticky; /*粘性定位 可以做吸顶效果 走到某一个位置可置顶显示*/
top: 0px;
margin: auto;
}
.b6{
height: 1000px;
width: 100%;
background-color: rgb(204, 203, 203);
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3">
<div class="b31"></div>
</div>
<div class="b4">广告位</div>
<div class="b5">粘性数据条</div>
<div class="b6"></div>
层级
z-index 值越大越靠上显示，需配合定位展示
绝对定位的深入探索
1.当层级为父子关系时，默认子层级高，若想提高父层级显示则将子层级设置为负数即可。
2.当层级为兄弟关系时，根据代码顺序后来者居上
3.黑魔法：使用绝对定位。可以使行内元素变成块,本来背景是靠内容撑开的，现在可设置宽高
span{
width: 60px;
height: 60px;
background-color: chocolate;
position: absolute;
left: 40px;
top:40px;
}
定位功能带来的水平垂直居中
.s1{
width: 200px;
height: 200px;
background:lightpink;
/* margin: auto; 只能实现水平居中 */
position: absolute;
/*绝对定位后，调整页面百分比距离，缩进块边框，实现水平垂直居中*/
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}