8.1 Position-static（默认定位）
static遵循默认的文档流布局，top、left、right、bottom属性都无效
position除了static属性值外，还有4个常用值，分别为
relative（相对定位） absolute（绝对定位）
fixed（固定定位） sticky（粘性定位）
8.2 Position-relative（相对定位）
relative先遵循默认的文档流布局也就是上一文说的static布局，然后再在不改变页面布局的前提下根据left、right、top、bottom调整次元素的位置。
也就是left、right、top、bottom的调整都是相当于当前元素static布局位置进行的调整。
8.3 Position-absolute（绝对定位）
absolute（绝对定位）和relation（相对定位）的区别，relation是相对自己进行top、left、right、bottom进行偏移，而absolute是寻找最近的非static的祖先节点进行偏移。
cursor：pointer；这个可以让我们鼠标停在元素上，变成可点击的形状。
举例
1.首先我们获取到第一张图片元素 <img class="first" src="xxx"/>，我们发现它是absolute布局
2.因此寻找它的父亲节点<div class=" img-box">，我们发现此元素并未配置position属性，其遵循默认布局position=static,并不符合非static要求。
3.因此继续找<div class="img-box">的父亲节点，找到<body>
4.<body> 已经没有父亲节点了。所以按照<body>的位置为标准进行偏移
8.4 Position-fixed
fixed为固定定位。固定定位和绝对定位类似，但元素的包含块为屏幕视口。固定定位不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来制定元素位置。元素位置在屏幕滚动时不会改变。
z-index：决定图层优先级
1、默认非static元素的z-index都为0
2、z-index越大，则越在最上面，离观察者越近
3、同样的z-index，在html中的元素越靠后，则越在最上面，离观察者越近。
4、非static元素，z-indeex都为0
8.5 Position-大作业
效果预览
<!DOCTYPE html>
<head>
<!--系统内置 start-->
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<!--系统内置 end-->
最低0.47元/天 解锁文章
385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
