定位

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

大家好,我是大帅子,今天给大家讲一下定位吧,顺便也让自己回忆一下

定位分为4种 , 静态定位, 固定定位 , 相对定位 , 绝对定位

定位	单词
静态定位	position: static
固定定位	position: fixed
相对定位	position: relative
绝对定位	position: absolute

然后我们说一些他们各自的效果

使用的方法

1. 先定位,然后根据方位值去移动
2. 四个方位 top left right bottom

1. 静态定位

1. 静态定位就是保持当前的位置,
2. 这个没有移动的意思,保持标准流,用的比较少

2. 相对定位

没有脱标, 元素的位置依然保留

3. 绝对定位

1. 绝对定位的元素,会找最近的父级元素,然后偏移自己的位置

2. 常用的定位方式就是 子绝父相

3. 绝对定位的元素脱标,不占据原来的位置

4.固定定位

1. 基于浏览器的可视窗口来定位
2. 完全脱标 不占位置
3. 和父元素没有任何关系
4. 不随滚动条滚动

五 定位的扩展

1）绝对定位的盒子居中

1 绝对定位的盒子不能通过 margin: auto; 设置水平居中
计算公式：
. 让盒子的左侧移动到父级元素水平中心的位置 left: 50%;
 . 让盒子向左移动自身宽度的一半  margin-left: -100px;

  原理图

2）堆叠顺序 z-index    z轴 [ 纵深轴 ] 

多个定位盒子是叠罗汉一样重叠在一起的。后来居上，后面的在最上面

1 属性值：整数、负整数。 默认值是0

2 如果属性值相同,则按照书写顺序，后来居上

3 数字后面不能加单位

4 z-index 只存在于定位中，其他标准流浮动无效

 3）定位改变了display属性

改变显示模式的方法

1 用 display: inline-block;

2 用浮动 float 默认转为行内块

3 绝对定位 固定定位也和浮动类似，默认转为行内块

所有说，一个行内盒子，如果加了浮动 固定定位和决对定位，不用再转换，直接给宽高就可以

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

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!