CSS——position样式属性

文档流的概念：文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。
position样式属性：用于定义建立元素布局所用的定位类型，该属性有多个值，下边介绍最常见的四个：

static

static：默认值。没有定位，元素出现在正常流中（忽略 top, bottom, left, right 或者 z-index 声明）

fixed

fixed：生成绝对定位的标签，相对于浏览器窗口进行定位，此时元素不会随着滚动条的滑动而滑动。元素通过 “left”, “top”, “right” 以及 “bottom” 属性进行定位

上述代码在浏览器窗口显示如下

以第二个红色边框为参照，当滚动条滚动时,在浏览器窗口显示如下，绿色块位置相对于浏览器窗口不变

引申1：将绿色块设置为点击之后回到首页，只需要在上边绿色块中添加如下代码

<div class="in" style="background-color:green;position:fixed;bottom:50px ;right:50px ;" onclick="javascript:window.scroll(0,0)"></div>

引申2：将绿色块设置为fixed之后，会脱离正常文档流，为了方便说明，第二个显示图片给黑色块高度设为120px

绿色块脱离正常文档流，黑色块上移了。

为了方便说明，第二个显示图片给黑色块高度设为120px

relative

relative：生成相对定位的标签。因此，“left:20” 会向标签的left位置添加 20 像素。
如下例子：不会脱离正常文档流，相对当前位置移动。

absolute

absolute：生成绝对定位的标签，相对于标签本身第一个position为非 static父元素进行定位。标签通过 “left”, “top”, “right” 以及 “bottom” 样式属性进行定位。如果该标签所在的父标签均没有设置position为非 static，则相对于浏览器窗口进行定位，但是此时元素会随着滚动条的滑动而滑动
将绿色块设置为absolute之后，会脱离正常文档流，为了方便说明，给黑色块高度设为120px


标签通过 “left”, “top”, “right” 以及 “bottom” 样式属性进行定位。如果该标签所在的父标签均没有设置position为非 static，则相对于浏览器窗口进行定位，但是此时元素会随着滚动条的滑动而滑动



absolute生成绝对定位的标签，相对于标签本身第一个position为非 static父元素进行定位,下例中红色边框为第一个非static的父元素


注意
任何元素都可以定位，但absolute或fixed元素会生成一个块级框，不论该元素本身是不是块级框。relative元素会相对于它在正常流中的默认位置偏移