零、概念
static 自然模型
a、如果两个相邻间的元素都设置了外边距（且有效），则他们之间的距离取决于最大的那个元素的外边距，而不是两个元素的外边距相加。
relative 相对定位模型
absolute绝对定位模型
a、填充
b、左右居中
c、上下左右居中
fixed 固定定位模型
sticky 磁贴定位模型
Ps1：矩形定位。
Ps2：以前都是用 JS 实现的，现在用CSS3即可。
Ps3：与fixed的区别是：这个可以在中间某一块想要固定top:npx;的时候才会固定，而不像fixed一开始进入页面就直接固定死在某一个位置。
Ps4：特点中的第三点要重视。
一、常用的三种定位
相对定位：相对于自己原来的位置(以自己原来的位置为参考点)，做偏移。
绝对定位：以就近的父元素(必须是祖先级别，不能是同辈级别。如果父元素没定位，就以爷爷（或祖先）作为参考点；如果有定位，只要是position即可。)，做偏移。
固定定位：始终以电脑屏幕的左上角为参考点（无论它父级是否加 position），做偏移。（补充：background-attachment:fixed; /* 背景图固定 */）
二、注意事项
Ps1：一般父元素设置：position:relative; 子元素设置：position:absolute。
Ps2：absolute 定位导致 width 自适应失效，需要写死 width。
/* absolute 定位导致 width 自适应失效，需要写死 width */ .nav ul li{ position:relative; } .nav .menu{ position:absolute; left=10px; top=20px; width:100px; } <div class="nav"> <ul> <li>女装 <div class="menu"><a>1</a><a>2</a></div> </li> </ul> </div>
Ps3：relative（占空间），fixed、absolute（不占空间，浮在上面）。
Ps4：z-index（默认值 0）（可以设置负数）（数字越大越在前面，若数字一样，则看层级关系，后面的代码覆盖（越在前面）前面的代码）（与 left、top 一样，必须要在 position 基础上才有效）。点击打开链接
Ps5：position:absolute; left:0; right:0; 因为宽度没了，但是又不想加宽度，所以用left、right把它撑开。
Ps6：
position:absolute; /* 不能用 margin:0 auto; 居中。更不推荐用数学计算的方式，因为会局限在父级，每次都算，很麻烦。 */
position:absolute; left:50%; margin-left:-(宽度一半)px; /* 推荐，水平居中，垂直居中类似 */
Ps7：在 position: absolute 前提下，如果此时没有设置 top/right/bottom/left 中的任何一个，则该元素还是处于标准流当中，否则就脱离文档流。
Ps8：如果都处于定位（除了 static）状态，则后面的元素会覆盖前面的元素（如果有重叠）。
三、常见问题
Q1：为何父元素推荐设置 relative 呢？
A1：如果父元素设置 absolute 的话，因为电脑分辨率不一样，以及逻辑上一样的参考点但物理上的参考点不一样导致显示不理想。
