定位

视觉格式化模型：

常规流
浮动 float
定位 position

position属性

默认值：static，静态定位（不定位）
relative：相对定位
absolute：绝对定位
fixed：固定定位

一个元素，只要position的取值不是static，认为该元素是一个定位元素。

定位元素会脱离文档流（相对定位除外）

一个脱离了文档流的元素：

文档流中的元素摆放时，会忽略脱离了文档流的元素
文档流中元素计算自动高度时，会忽略脱离了文档流的元素也就是说绝对定位和固定定位无法撑开他的父元素。

举例子

 .contain{
            background-color: red;
            position: relative;
        }
        .sub {
            background-color: green;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 100px;
            left: 100px;

        }

<div class="contain"><div class="sub"></div></div>

定位中left top right bottom 都是相对于包含块（父元素里面第一个有定位的元素）的填充盒（padding包含在内，不包含border）的位置开始的。边框盒：包含border 内容盒：只包含content的内容

相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。

可以通过四个CSS属性对设置其位置：

left
right
top
bottom

盒子的偏移不会对其他盒子造成任何影响。

绝对定位

宽高为auto，适应内容
包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）绝对定位找包含块是核心，如果你找不到包含块，就不找到当前写的left，top 是相对谁的？

固定定位

其他情况和绝对定位完全一样。

包含块不同：固定为视口（浏览器的可视窗口）

视口和初始化包含块的区别是什么？视口就是可见范围，相当于scrollview的frame,而初始化包含块相当于scrollview 的内容 contentsize。

三种定位平时怎么使用？

1.一般相对定位用的最多的是为了绝对对位提供包含块的的。 2.固定定位就是为了把某个东西固定在视口用的

定位下的居中

某个方向居中：

定宽（高）
将左右（上下）距离设置为0
将左右（上下）margin设置为auto

绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间

多个定位元素重叠时

堆叠上下文

设置z-index，通常情况下，该值越大，越靠近用户

只有定位元素设置z-index有效

z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖

补充

注意一点绝对定位和固定定位会将行内盒变成块盒。所以绝对定位和固定定位一定是块盒。相对定位行盒仍然是行盒。静态定位行盒仍然是行盒。

绝对定位、固定定位元素一定是块盒
绝对定位、固定定位元素一定不是浮动
没有外边距合并