一、为什莫需要定位
二、定位的组成
三、静态定位static
静态定位就相当于标准流,具有标准流的全部特性。
四、相对定位
相对定位 ,走了之后位置还会保留,可以理解为 :人走了,钱还在。
五、绝对定位
绝对定位会飘的比浮动还要高,不占有位置 可惜可叹,人死了,钱也没了。
六、子绝父相
七、固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
/* 盒子居中对齐 */
margin: 0 auto;
}
.fixed {
position: fixed;
bottom: 15px;
/* 1.走浏览器宽度的一半 */
left: 50%;
/* 2.利用margin 走版心盒子宽度的一半距离 */
margin-left: 405px;
width: 50px;
height: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">版心盒子 800像素</div>
</body>
</html>
八、粘性定位sticky(了解)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 3000px;
}
.box {
position: sticky;
top: 10px;
margin: 100px auto;
width: 50px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
九、定位总结
十、定位堆叠顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.xiongda {
background-color: red;
/* 定位层叠优先级 */
z-index: 1;
}
.xionger {
background-color: green;
left: 50px;
top: 50px;
}
.qiangge {
background-color: blue;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class=" box xiongda"></div>
<div class=" box xionger"></div>
<div class=" box qiangge"></div>
</body> box
</html>
十一、绝对定位的盒子居中
当然固定定位盒子居中也是如此啦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: absolute;
/* 1.left 走 50% 父容器宽度的一半 */
left: 50%;
/* 2.margin 负值 往左走 自己盒子宽度的一半 */
margin-left: -100px;
/* 这里水平居中,跟上面的方法一样 */
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: pink;
/* margin: auto;没用 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
十二、定位的特殊特性