定位流分类
1.1.静态定位 position: static;
是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。
1.2.相对定位 position: relative;
相对定位是相对于元素原本在标准流的位置移动
1.不脱离文档流，区分行/块/行快
2.可以设置margin，padding，每一个属性只能设置一次
3.相对定位结合top right,bottom,left来使用
<div class="realtive"></div>
<style>
.realtive{
width: 50px;
height: 50px;
background-color: pink;
position: relative;
/* 相对定位结合top right,bottom,left */
left: 100px;
}
</style>1.3.绝对定位 position: absolute;
绝对定位就是相对于body来定位 ：
1.脱离文档流，不区分块级元素/行内元素/行内块级元素
2.一个绝对定位的元素会忽略祖先元素的padding
3.只设置自身为绝对定位时，元素会参照视口区来定位（祖先元素中没有相对定位/固定/绝对）
4.默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
结合相对定位来使用：
1.祖先元素（祖先相对 子孙绝对）
2.当祖先元素中都有相对定位时，参考就近原则，直接父亲-又相对定位时，一定会先参照直接父类定位
3.当祖先元素只有一个有相对定位，则参照这仅有的一个定位来移动--- 就近原则
设置绝对定位水平居中：只需要设置绝对定位元素的left:50%;
然后再设置绝对定位元素的 margin-left: -元素宽度的一半px; （-号与数不能空格）
<!-- 绝对定位水平居中 -->
<body>
<div class="juedui"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="test"></div>
</body>
<style>
.juedui{
width: 100px;
height: 100px;
background-color: green;
/* 绝对定位 */
position: absolute;
/* 水平居中 ：没有父元素是body的一半*/
left: 50%;
/* 负号不能空格 */
margin-left: -50px;
/* opacity: 0.5; */
}
/* 测试水平居中 */
.test{
width: 100px;
height: 100px;
background-color: pink;
margin: 0 auto;
}
</style>1.4.固定定位 position: fixed;
固定定位可以让某个盒子不随着滚动条的滚动而滚动。
1.脱离标准流的, 不会占用标准流中的空间
2.不区分行内/块级/行内块级
<body>
<div class="fixed"></div>
<div class="test2"></div>
</body>
<style>
.fixed{
width: 800px;
height: 800px;
background-color: green;
/* 设置固定定位后将不能在页面中滚动 */
position: fixed;
/* 产生滚动条 */
overflow: scroll;
/* 透明度设置为0后将不能看见fixed模块 */
/* opacity: 0; */
}
.test2{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
1.5.粘滞定位 position: sticky;
结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
1.设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
2.当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。
使用条件：
1.父元素不能overflow:hidden或者overflow:auto属性。
2.必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3.父元素的高度不能低于sticky元素的高度
3.sticky元素仅在其父元素内生效
<body>
<div class="father">
<div class="son">1</div>
<div class="son1">2</div>
</div>
</body>
<style>
.father{
width: 800px;
height: 500px;
border: 2px solid black;
margin-top: 50px;
margin-left: 300px;
position: relative;
overflow: scroll;
}
.son{
width: 100px;
height: 100px;
margin-top: 70px;
margin-left: 300px;
margin-bottom: 50px;
background-color: green;
/* 粘滞定位 */
position: sticky;
top: 60px;
}
.son1{
width: 100px;
height: 600px;
background-color: yellow;
/* 右移300px,使与元素son对齐 */
margin-left: 300px;
}
</style>
未使用粘滞定位前：
使用粘滞定位后：
1.6.z-index 专门用于控制定位流元素的覆盖关系的
默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
1.默认情况下定位流的元素会盖住标准流的元素
2.默认情况下定位流的元素后面编写的会盖住前面编写的
3..如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面
注意点:
1.如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。
2.如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面。
<body>
<div class="grandfather">
<div class="brother"></div>
</div>
<div class="grandfather2">
<div class="brother2"></div>
</div>
</body>
<style>
/* 1.当两个元素的父元素都没有设置值时，子元素的值谁大谁在上
2.当两个元素的父元素设置了值，从父
*/
.grandfather{
/* z-index: 3; */
width: 300px;
height: 300px;
background-color: pink;
position: relative;
/* 3 0 */
}
.brother{
/* 2 3 */
width: 200px;
height: 200px;
background-color:yellow;
position: relative;
/* z-index: 2; */
}
.grandfather2{
/* z-index: 2; */
width: 300px;
height: 300px;
background-color:green;
position: relative;
/* 外层 黄色>蓝色
内存 黄色<蓝色
结果：蓝色在上
*/
}
.brother2{
width: 100px;
height: 100px;
background-color:blue;
/* 整个元素块往上移动200px */
margin-top: -200px;
position: relative;
/* z-index: 3; */
}
</style>效果图：
最后一次改变，说明父元素子元素同时都有z-index值的情况下，会从父，也就是父元素的值起作用，子元素的值会失效。
注意：
z-index用在控制定位流的覆盖上才会有，上文没有设置position: relative;不会有明显效果。
元素的层级结构显示：定位流>z-index值大的>普通流
定位流中才有z-index属性
852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
