09-定位

定位

总结（一般情况下）：

• 页面的整体结构大多采用浮动、块进行布局
• 页面某些模块结构一般采用定位进行微调

页面的整体结构大多采用浮动、块进行布局
页面某些模块结构一般采用定位进行微调

我们实际开发中，页面上的元素可能很多，这样改必然是 牵一发而动全身

那么仅仅靠我们之前学习的布局知识，不足以轻松应对这种场景

那么就势必需要一个方便我们处理这种场景的办法，它就是定位
定位（position）
定位是一种更加高级的布局手段

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

使用position属性来设置定位

可选值	含义
static	不开启定位，元素是静止的，默认值
relative	开启元素的绝对定位
absolute	开启元素的绝对定位
fixed	开启元素的固定定位
sticky	开启元素的粘滞定位

1 相对定位relative

当元素的position属性值设置为relative时，开启了元素的相对定位

什么是相对定位？
相对定位是参照于元素在文档流中的位置进行定位的（可以理解为相对于自身原始位置）

参照于自身所作出的一个定位移动

相对定位的特点

1. 当元素开启相对定位以后，如果不设置偏移量元素，则元素不会发生任何变化（这里注意，不仅仅是位置）
2. 相对定位是参照于元素在文档流中的位置进行定位的（可以理解为相对于自身原始位置）
3. 相对定位会提升元素的层级（表现为可以覆盖其他元素）
4. 相对定位不会改变元素的性质：块还是块，行内还是行内

偏移量

当我们开启相对定位之后，可以通过偏移量设置元素的位置

• top 定位元素和定位位置的上边距离
• bottom 定位元素和定位位置的下边距离
• left 定位元素和定位位置的左侧距离
• right 定位元素和定位位置的右侧距离

注意：一般情况下，top和bottom 只会选择其中之一，left和right 也是二选一，一般不会同时存在

可以看出移动的元素，不会对已存在的元素产生任何影响

2 绝对定位

当元素的position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位的特点

1. 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
2. 开启绝对定位后，元素会从文档流中脱离
3. 绝对定位会改变元素的性质：行内变成块，块的宽高被内容撑开（与相对定位相反）
4. 绝对定位会使元素提升一个层级
5. 绝对定位元素是相对于其包含块进行定位的（与相对定位不同）

我们可以看到，当元素开启绝对定位，下面的元素就会跑上来了，因为绝对定位是脱离文档流的

如何定位，以什么来定位？

偏移量

• top 上边距离
• bottom 下边距离
• left 左侧距离
• right 右侧距离

我们的绝对定位 是以离当前元素最近的包含块进行定位

包含块

• 包含块就是离当前元素最近的开启了定位的祖先块元素
• 如果所有的祖先元素都没有开启定位，则html（根元素、初始包含块）就是它的包含块
  

绝对定位的布局

我们之前说过一个盒子在水平方向他的布局必须满足于那个公式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度

我们的绝对定位也要满足一条新公式，水平和垂直方向都必须满足

满足的对象，从父元素就变成了最近的包含块

水平方向多了：left right
垂直方向多了：top bottom

1. 水平布局

left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 最近包含块的宽度

• 可以设置为auto的值：margin width left right
• 如果值中没有auto，则自动调整right值以使等式满足
• 如果有auto，就自动调整那个auto

示例

<style>
    .box1 {
        width: 500px;
        height: 500px;
        background-color: #bfa;
        position: relative;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 左右外边距设置为auto */
        margin-left: auto;
        margin-right: auto;
        /* 绝对定位 */
        position: absolute;
        left: 0;
        right: 0;
    }
</style>

<div class="box1">
    <div class="box2"></div>
</div>

2.垂直布局

垂直也是一样，多了top bottom

top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + top = 其最近包含快的高度

示例

.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
    /* 左右外边距设置为auto */
    margin-top: auto;
    margin-bottom: auto;
    /* 绝对定位 */
    position: absolute;
    top: 0;
    bottom: 0;
}

水平垂直居中

.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
    /* 左右外边距设置为auto */
    margin: auto;
    /* 绝对定位 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

3. 固定定位

将元素的position属性设置为fixed，则开启了元素的固定定位

特点
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样

唯一不同的是，固定定位永远参照于浏览器的视口（viewport，可视窗口）进行定位，不会随网页的滚动条滚动

像我们浏览网页时候的那些广告就是如此，永远在可视窗口的固定位置

4. 粘滞定位

将元素的position属性设置为sticky，则开启了元素的固定定位

特点：

• 粘滞定位和相对定位的特点基本一致
• 不同的是粘滞定位可以在元素到达某个位置时将其固定

注意：粘滞定位兼容性差

5. 几种定位的对比

6. 元素层级z-index

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

• z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示
• 如果元素的层级一样，则优先显示靠下的元素
• 祖先的元素的层级再高，也不会盖住后代元素