一、定位
目标:能够说出 定位 的常见应用场景,并且能够说出 不同定位方式 的特点
定位的常见应用场景是什么?
- 解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高,可以层叠在其他盒子上
- 可以让盒子始终固定在屏幕中的某个位置
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
}
.red{
background-color: red;
}
.blue{
/* 设置定位方式 */
position: absolute;
/* 设置偏移值 */
top: 150px;
left: 150px;
background-color: blue;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
效果图
.green{
/* 设置定位发展 */
position: relative;
top: 100px;
left: 100px;
background-color: green;
}
相对自己移动
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
}
.red {
background-color: red;
}
.green {
/* 1、定位方式-绝对定位 */
position: absolute;
/* 2、偏移值 */
top: 100px;
left: 100px;
background-color: green;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>
<style>
.father {
/* 设置定位 */
position: relative;
width: 600px;
height: 600px;
background-color: pink;
}
.son {
/* 设置定位 */
position: relative;
width: 400px;
height: 400px;
background-color: skyblue;
}
.sun {
/* 绝对定位 */
position: absolute;
right: 0;
bottom: 0;
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="sun"></div>
</div>
</div>
</body>
</html>
<style>
.father {
/* 父相 */
position: relative;
/* 父绝 */
/* position: absolute; */
width: 600px;
height: 600px;
background-color: pink;
}
.son {
/* 子绝 */
position: absolute;
right: 0;
bottom: 0;
width: 400px;
height: 400px;
background-color: blue;
}
</style