#目标#：能够说出定位的常见应用场景，并且能够说出不同定位方式的特点
学习路径：
1.定位的基本介绍
三种布局方式：
2.定位的基本使用
3.静态定位
即默认效果
4.相对定位
代码示例：
<style>
div{
position: relative;
left: 100px;
top: 200px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
*注意*：如果水平方向上：既写left，又写right，那么浏览器会以left的值为准
如果垂直方向上：既写top，又写bottom，那么浏览器会以top的值为准
5.绝对定位
特点： 1.先找到已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位
2.有父级，但父级没有定位，以浏览器窗口为参照进行定位
*注意*：改变标签的显示模式特点：具有行内块特点（在一行共存，宽高生效）
代码示例（1）：
<style>
div{
position: absolute;
/* 此时div标签下部的内容将会占据div的原位置，而div直接浮动于原位置 */
width: 200px;
height: 200px;
background-color: pink;
}
</style>
代码示例（2）：
<style>
div{
position: absolute;
left: 0;
top: 0;
/* 此时div盒子移动至浏览器的左上角 */
width: 200px;
height: 200px;
background-color: pink;
}
</style>
6.子绝定位
代码示例：
<style>
.father{
width: 400px;
height: 400px;
background-color: pink;
}
.son{
position: relative;
bottom: 20px;
/* 工作当中使用子绝父相的方法：因为若父级为绝对定位，那么在给父级加top和left等属性时，父级和子级会一同脱标 */
/* 逐层查找定位的父级，如果逐层查找不到定位的父级，那么以浏览器的窗口为参考定位 */
width: 200px;
height: 200px;
background-color: skyblue;
}
.sun{
position: absolute;
right: 20px;
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="sun">
</div>
</div>
</div>
</body>
拓展：因为绝对定位后的盒子不能使用margin：0 auto；进行居中
所以针对此现象有以下解决方法：
代码示例（1）：
<style>
div{
position: absolute;
/* 绝对定位的盒子不能使用margin: auto;进行左右居中 */
/* margin: 0 auto; */
left: 50%;
/* 可使盒子移至浏览器页面的中间偏右的位置 */
margin-left: -200px;
/* 可使盒子向左移动-200px的距离，既向右移动200px的距离，此时盒子移至水平居中的位置 */
/* 垂直居中，同理即可 */
top: 50%;
margin-top: -200px;
width: 400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
代码示例（2）：
<style>
div{
position: absolute;
/* 绝对定位的盒子不能使用margin: auto;进行左右居中 */
/* margin: 0 auto; */
/* 可使盒子移至浏览器页面的中间偏右的位置 */
left: 50%;
/* 可使盒子移至浏览器页面的中间偏下的位置 */
top: 50%;
/* 表示向上/向右位移：自己宽度/高度的一半 */
transform: translate(-50%,-50%);
width: 400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
拓展：
<style>
.banner{
position: relative;
margin: 0 auto;
width: 228px;
height: 155px;
}
.mask{
position: absolute;
left: 0;
bottom: 0;
/* 绝对定位的盒子显示模式具备行内块的特点：加宽加高生效，如果没有宽或高就没有内容，盒子的宽或高尺寸就为0 */
/* width: 228px; */
/* 如果子级和父级的宽度相同，则可写成下面这种形式 */
width: 100%;
height: 50px;
background-color: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="banner">
<img src="./course08.png" alt="">
<!-- 罩衫 -->
<div class="mask"></div>
</div>
7.固定定位
代码示例：
.box{
/* css书写：1.定位/浮动/display; 2.盒子模型； 3.文字属性 */
position: fixed;
left: 0;
right: 0;
/* 1.脱标
2.改变位置时以浏览器窗口为参考
3.具备行内块的特点 */
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">box</div>
</body>
8.元素的层级关系
代码示例：
<style>
div{
width: 200px;
height: 200px;
}
.one{
position: absolute;
left: 50px;
top: 50px;
z-index: 1;
/* 默认情况下：定位的盒子：后来者居上
z-index:整数;取值越大，显示的越靠前，z-index的默认值是0;
注意：z-index必须配合定位才生效 */
background-color: pink;
}
.two{
position: absolute;
left: 100px;
top: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
1252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
