一.概述

1.定位是一个更加高级的布局手段，定位最重要的是找对参照物

2.通过定位可以将元素摆放在页面的任意位置

3.使用position属性设置定位，可选值有：

（1）static：默认值，表示元素静止没有开启定位
（2）relative：开启元素的相对定位
（3）absolute：开启元素的绝对定位
（4）fixed：开启元素的固定定位
（5）sticky：开启元素的粘滞定位

4.偏移量(offset)：当元素开启了定位，可以通过偏移量来设置元素的定位，可以取负值

（1）top：定位元素与参照物上边的距离
（2）bottom：定位元素与参照物下边的距离
（3）left：定位元素与参照物左边的距离
（4）right：定位元素与参照物右边的距离

5.将网页想象成坐标系的话，那么离开网页方向是负值，所以就是x轴向左为负，y轴向上为负

二.相对定位

1.相对定位的特点：

（1）元素开启相对定位，如果不设置偏移量则不会发生任何变化
（2）相对定位是参照于元素在文档流中的原位置进行定位操作的（原位置看作参照物）
（3）相对定位会提升元素的层级，就可以覆盖其他元素
（4）相对定位不会使其脱离文档流
（5）相对定位不会改变元素的性质，行内元素还是行内元素，块元素还是块元素
（6）元素到了新的位置，但是他的原位置还会占着，下边的元素不会上去

三.绝对定位

1.绝对定位的特点：

（1）开启绝对定位后，不设置偏移量元素的位置不会发生改变，但是会有其他的改变
（2）开启绝对定位后，元素会从文档流中脱离，不会占用原来的位置
（3）绝对定位和固定定位会改变元素的性质，行内变成块元素，块元素的宽高会被内容撑开
（4）绝对定位会提升元素的层级
（5）绝对定位是相对其包含快进行定位的（包含块做参照物）

2.包含块（containing block）

（1）正常情况下，包含块就是离当前元素最近的祖先块元素

里面的div的包含块是外面的div
em的包含块是div,因为span不是块元素

（2）绝对定位条件下的包含块就是离他最近的开启了定位的祖先元素，如果所有祖先元素都没有开启，则包含块就是根元素（html元素）

四.固定定位

1.固定定位就是特殊的绝对定位

2.特点与绝对定位都相同，也不占原来的位置

3.唯一不同的是固定定位永远与浏览器视口作为参照物进行定位

4.视口：浏览器的可视窗口，视口固定不动的，即使有滚动条滚动也不会改变位置

5.固定定位就是用于把一个窗口固定，滑动滚动条他也不动

五.粘滞定位

1.粘滞定位就是元素跟随页面移动一段距离后，在固定不动

2.特点与相对定位一致

3.参照物是根元素

4.设置粘滞定位后必须指定位置，例如指定top：0；就是盒子移动到距离可视上窗口0的时候就固定住

六.绝对定位元素的位置

1.正常水平元素布局需满足公式：

左边框宽度+右边框宽度+左内边距+右内边距+左外边距+右外边距+子元素宽度 = 父元素宽度

2.开启绝对定位后，水平方向布局就要在等式左边加上left和right
left+right+左边框宽度+右边框宽度+左内边距+右内边距+左外边距+右外边距+子元素宽度 = 其包含块的内容区宽度

3.当等式不成立时，发生过度约束：
（1）若9个值中没有auto，自动调整right使等式成立
（2）有auto，会自动调整该值使等式成立
其中margin，width，left，right的值可以设置为auto
left和right的值默认为auto，若不知道left和right，等式不成立时会自动调整这两个值

4.垂直方向布局
（1）需满足公式：
top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 其包含块的内容区的宽度

（2）设置居中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: relative;
            /*设置定位会把box1当作包含块，不设置就是根元素做包含块*/
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(182, 16, 107);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin-left: auto;
            margin-right: auto;
            margin-top: auto;
            margin-bottom: auto;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

七.元素的层级

1.元素的层级越高，越优先显示

（1）必须是定位了的元素才可以设置层级

2.对于开启了定位的元素，可以用z-index属性来指定元素的层级

（1）属性值设置为整数（正整数，0，负整数），整数越大，层级越高

web前端

定位