文档流又称正常流,是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。而position样式属性是用于定义建立元素布局所用的定位类型,该属性有多个属性值,主要有四个:static、relative、fixed、absolute。
一、static
默认值。没有定位,元素出现在正常流中(忽略 top, bottom, left, right 或者 z-index 声明)。示例如下:
<div style="border: 1px solid red; width: 300px; height: 300px;">
<div class="a" style="background-color: black;"></div>
<div class="a" style="background-color: yellow; position: static;"></div>
<div class="a" style="background-color: green;"></div>
</div>
<style>
.a{
width: 100px;
height: 100px;
}
</style>
运行结果如下图:
二、relative
生成