定位 position

定位 position:

​ 定位可以让盒子自由的在某个盒子内移动位置，或者 固定在屏幕中的某个位置

定位= 定位模式 +边偏移

1.静态定位 static()

无定位，

2.相对定位 position:relative;

相对于它自己原来的位置移动

没有脱标，仍继续占有标准流位置，（应用：子绝父相 或 相对移动自己的位置）

3.绝对定位 position:absolute;

相对于有定位的祖级元素移动，以就近一级为参考点（爸爸没有找爷爷）

如果没有族级元素 或祖级元素都没有定位，则以浏览器为准定位

脱标，不占有原先的位置

子绝父相 原因：

子级用绝对定位，父级就用相对定位

​ 1.子级绝对定位，不占有位置，可以放在父盒子 的任意位置，不影响其他盒子

​ 2.子级需要加定位限制在父盒子的显示

​ 3.布局时，需要占有位置，父级相对定位有位置

4.固定定位 position:fix;

固定于浏览器的可视区域, 和父元素无关。不随滚动条滚动。

（使用：浏览器滚动页面时元素位置不会改变）

脱标，不占有原先位置

定位在版心右侧（想要在右侧 ，就是定位盒子的左侧碰中线，碰版心）

1.让固定定位的盒子 left:50% 走到浏览器的一半

2.让固定定位的盒子margin-left：版心的一半 ；

.pom {
        position: fixed;
        top: 0px;
        left: 50%;
        margin-left: 400px;

定位在版心左侧（想要在左侧 ，就是定位盒子的右侧碰中线，碰版心）

1.让固定定位的盒子 right:50% 走到浏览器的一半

2.让固定定位的盒子margin-right：版心的一半 ；

.pom {
        position: fixed;
        top: 0px;
        right: 50%;
        margin-right: 400px;

5.粘性定位 position:sticky；

以浏览器可视窗口为参考点移动（固定定位特点）

占有原先位置（相对定位特点）

和页面滚动搭配使用，兼容性差 IE不支持

定位的叠放次序

z-index

数值可以是 负数，0，正整数，值越大，越靠上

若值相同，则后来者居上

不加单位

只有定位的盒子才有z-index属性

绝对定位盒子的居中：

加了绝对定位的盒子不能通过 margin:0 auto 水平居中。但可以通过计算：

1. Left：50%； 让盒子的左侧移动到父元素的水平中心位置。
2. margin- left : -100px; 让盒子向左移动自身宽的一半。

 .box1 {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50%;
        margin-left: -100px;
        top: 50%;
        margin-top: -100px;
        background-color: #ff5555;
    }

绝对定位和固定定位 和 浮动类似

1.行内元素添加绝对 或 固定定位，可以直接设置宽高

块级元素添加绝对 或 固定定位，如果不给宽高，默认大小是内容的大小。

2.脱标的盒子不会触发 外边距塌陷

浮动元素，绝对定位，固定定位 都不会触发 外边距合并的问题。

3.绝对定位，固定定位 会压住标准流所有的内容。

浮动，只会压住盒子，不会压住盒子里的文字，因为最初 浮动是为了文字环绕。