持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情
标准流(Normal Flow)
1.了解标准流
默认情况下，元素都是按照normal flow(标准流、常规流、正常流、文档流【document flow】）进行排布
从左到右、从上到下按顺序摆放好
默认情况下，互相之间不存在层叠现象
<body>
<span>span1</span>
<img src="images/cube.jpg" alt="">
<span sty1e="display: inline-block">span2</span>
<div>div</div>
<p>p</p>
<span sty1e="display: inline-block">span</span>
<strong>strong</strong>
<h1>h1</h1>
<span>span3</span>
<span sty1e="display: inline-block">span4</span><span>span5</span>
</body>
2.margin-padding位置调整
在标准流中，可以使用margin、padding对元素进行定位
其中margin还可以设置负数
比较明显的缺点是
设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
不便于实现元素层叠的效果
如果我们希望一个元素可以跳出标准流,单独的对某个元素进行定位呢?
我们可以通过position属性来进行设置;
认识元素的定位
定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为:
例如放在另一个元素的上面;
或者始终保持在浏览器视窗内的同一位置;
定位在开发中非常常见:
3.认识position属性
利用position可以对元素进行定位，常用取值有5个:
默认值:
static:默认值,静态定位
使用下面的值,可以让元素变成定位元素(positioned element)
relative:相对定位
absolute:绝对定位
fixed:固定定位
sticky:粘性定位
4.静态定位- static
position属性的默认值
元素按照normal flow布局
left 、right、top、bottom没有任何作用
