【CSS】我理解的position

注：本文是《CSS权威指南》的学习笔记

position：用于定位

static：

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：

元素框从文档流中完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed：

元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。

包含块：

偏移属性：

定位元素各边相对于其包含块的偏移。

总结

绝对定位：absolute

元素绝对定位时，会从文档流中完全删除，然后相对于其包含块定位，其边界根据偏移属性放置。定位元素不会流入其他元素的内容，反之亦然，这说明，绝对定位元素可能覆盖其他元素或者被其他元素覆盖。

绝对定位元素的包含块是最近的position值不为static的祖先元素。通常会选择一个元素作为绝对定位元素的包含块，将其position指定为relative而且没有偏移。

绝对定位元素的top、left、right设置为auto，则会按照元素在正常流中原本的位置放置，但是会与其他元素发生重叠。

固定定位：fixed

固定定位与绝对定位类似，但是固定元素的包含块是视窗。固定定位时，元素会完全从文档流中去除，不会有相对于文档中任何部分的位置。

相对定位：relative

保留元素在原来文档中的位置。

span {position: relative; top: 10px; bottom: 20px;}

遇到这种情况时bottom会reset成 -top即 bottom： -10px;

span {position: relative; top: 10px; bottom: -10px;}即bottom: -10px等同于top: 10px;

从左到右读的语言里，重置right = (-left) 即right: -10px;等同于 left: 10px;
从右往左读的语言里，重置left = (-right)