---
title: 定位
date: 2024-06-06T23:49:51Z
tags: []
---

## 相对定位

1. 设置
   - 给元素设置`position:relative`
   - 可以使用`left`,`right`,`top`,`bottom`四个属性调整位置
2. 参考点
   参考点在中间原理的位置
3. 特点
   - 定位元素层级比普通元素高
   - left和right不能一起设置,top和bottom不能一起设置
   - 不推荐再设置浮动或margin

## 绝对定位

1. 设置
   - 给元素`position:abolute`即可实现绝对定位
   - 可以使用`left`,`right`,`top`,`bottom`四个属性调整位置
2. 参考点
   参考包含块
   1. 对于没有脱离文档的元素,包含块就是父元素
   2. 对于脱离文档的元素:包含块是第一个拥有定位属性的祖先元素( 如果祖先元素都没有定位,那就是整个页面)
3. 特点
   1. 脱离文档流,会对后面的兄弟元素,父元素有影响
   2. left和right不能一起设置,top和bottom不能一起设置
   3. 绝对定位,浮动不能同时设置,如果 同时设置,浮动失效,以定位为主
   4. 不推荐再设置margin
   5. 无论什么元素设置绝对定位之后,都变成定位元素

## 固定定位

1. 设置
   - 给元素`position:fixed`即可实现绝对定位
   - 可以使用`left`,`right`,`top`,`bottom`四个属性调整位置
2. 参考点
   参考视口
   视口:浏览器显示的窗口
3. 特点
   1. 与绝对定位特点一样

## 粘性定位

1. 设置
   - 给元素`position:sticky`即可实现绝对定位
   - 可以使用`left`,`right`,`top`,`bottom`四个属性调整位置
2. 参考点
   离他最近的一个拥有"滚动机制"的祖先元素,即便这个祖先不是最近的真实可滚动祖先
3. 特点
   1. 不会脱离文档,它是一种专门用于窗口滚动时的新的定位方式
   2. 最常用的值是top值
   3. 粘性定位和浮动可以同时设置,但不推荐这样做
   4. 不推荐再设置margin

## 定位层级

1. 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的
2. 如果位置发生重叠，默认情况是后面的元素会显示在前面元素之上
3. 可以通过css属性`z-index`调整元素的显示层级
4. `z-index`的属性值是数字,没有单位,值越大显示的层级越高
5. 只有定位的元素设置`z-index`才生效
6. 只有`z-index`值大的元素,依旧没有覆盖掉`z-index`值小的元素,先检测其包含块的元素

## 特殊应用

### 让定位元素充满包含块

1. 块宽想与包含块一致,可以同时给定位元素设置`left`和`right`为0
2. 高度想与包含块一致,`top`和`bottom`设置为0

### 让定位元素在包含块中居中

1. 方案一

   ```css
   position: absolute;
   left:0;
   right:0;
   top:0;
   bottom:0;
   margin:auto;
   ```

2. 方案二

   ```css
   left:50%
   right:50%
   margin-left:负的宽度的一般
   margin-top:负的高度的一般
   ```
