标准流

默认元素都是按照标准流进行排布，从左到右、从上到下按顺序摆放好，互相之间不存在层叠现象

<span>span1</span>
<img src="images/cube.jpg" alt="">
<span style="display: inline-block">span2</span>
<div>div</div>
<p>p</p>
<span style="display: inline-block">span</span>
<strong>strong</strong>
<h1>h1</h1>
<span>span3</span>
<span style="display: inline-block">span4</span>
<span>span5</span>

元素定位

定位允许从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置

利用position可以对元素进行定位，常用取值:

static: 静态定位，默认值，标准流布局，left 、right、top、bottom没有任何作用
relative：相对定位，标准流布局，可以通过left、right、top、bottom进行定位，定位参照是元素自己原来的位置

// 2³ + 2³ = 16
<div>
    2<span>3</span> + 2<span>3</span> = 16
</div>

span{
    position: relative;
    bottom: 8px;
}

fixed：固定定位，元素脱离标准流,可以通过left、right、top、bottom进行定位,定位参照对象是视口，当画布滚动时，固定不动
absolute：绝对定位，元素脱离标准流，可以通过left、right、top、bottom进行定位，定位参照对象是最邻近的定位祖先元素，如果找不到这样的祖先元素，参照对象是视口
sticky：粘性定位，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;当达到这个阈值点时, 就会变成固定(绝对)定位;它相对于最近的滚动祖先包含滚动视口的

z-index

z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）

比较原则：

如果是兄弟关系

✓ z-index越大，层叠在越上面

✓ z-index相等，写在后面的那个元素层叠在上面
如果不是兄弟关系

✓ 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较

✓ 而且这2个定位元素必须有设置z-index的具体数值

CSS-元素定位

标准流

元素定位

z-index