CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）

静态定位 position: static 【默认】

此时，元素按 文档流 的方式排布：

• 以左上角为起点
• 内联元素 从左到右依次排布，当一行排不下时，自动换到下一行继续从左到右排布
• 块级元素 独占一行

此时，top、left、right、bottom、z-index 等样式无效。

相对定位 position: relative

相对于原文档流的位置，进行上下左右的偏移，因 原文档流的位置会保留，所以其他元素的位置不会被影响。

• left：右移
• right：左移
• top：下移
• bottom：上移

上方 样式的名称和实际效果的方向相反，小心出错！

<template>
  <p>默认定位</p>
  <button>按钮1</button><button>按钮2</button><button>按钮3</button>
  <p>相对定位</p>
  <button>按钮1</button><button class="relativeDemo">按钮2</button><button>按钮3</button>
</template>

<style scoped>
.relativeDemo {
  position: relative;
  /* 向下偏移 10 px */
  top: 10px;
}
</style>

• top/bottom 同时使用的时候，bottom 无效；
• left/right 同时使用的时候，right 无效
• left/top/right/bottom 的样式值为百分比时，相对于父元素进行计算，而不是自身，如果父元素没有高度，则 top/bottom 无效。

绝对定位 position: absolute

依据最近一层的定位元素（position 值为 absolute/relative/fixed 的元素）定位，若无定位元素，则依据 body 定位。

position: absolute 必须配合 left,right,top,bottom 一起使用，否则元素还在原文档流的位置。

当元素依据 body 标签定位时：

• top 属性为元素上边框外侧与 body 上边框内侧间的距离

• bottom 属性为元素下边框外侧与 浏览器窗口下边框 内侧间的距离
• left 属性为元素左边框外侧与 body 左边框内侧间的距离
• right 属性为元素右边框外侧与 body 右边框内侧间的距离

<template>
  <p>默认定位</p>
  <button>按钮1</button><button>按钮2</button><button>按钮3</button>
  <p>绝对定位</p>
  <button>按钮1</button><button class="Demo">按钮2</button><button>按钮3</button>
</template>

<style scoped>
.Demo {
  position: absolute;
  /* 绝对定位元素下边框外侧与 浏览器窗口下边框 内侧间的距离为10px */
  bottom: 10px;
}
body {
  height: 120vh;
}
</style>

当元素依据其他定位元素定位时：

• top 属性为元素上边框外侧与 定位元素 上边框内侧间的距离
• bottom 属性为元素下边框外侧与 定位元素 下边框内侧间的距离
• left 属性为元素左边框外侧与 定位元素 左边框内侧间的距离

• right 属性为元素右边框外侧与 定位元素 右边框内侧间的距离

当 left,right,top,bottom 的值为百分比，且元素是图片时：

• top 和 bottom 属性最终的值 = （定位元素的高度 - 元素的高度）* 百分比

• left 和 right 属性最终的值 = （定位元素的宽度 - 元素的宽度）* 百分比

当对立方位的属性都有值时，绝对定位元素会像流体一样充满整个空间，比如 纯CSS 实现全屏遮罩

<template>
  <div class="mask"></div>
</template>

<style scoped>
/* 全屏遮罩 */
.mask {
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

元素绝对定位后，会发生以下变化：

• 脱离文档流（原文档流的位置不会保留）
• display 最终的值为 block/table ，但宽度不会自动撑满整行，还是由其内容决定（无法设置宽高的内联元素在绝对定位后，也可以设置宽高）

【实战】子绝父相

父元素相对定位，子元素绝对定位，常用于实现子元素重叠在父元素上。

<template>
  <div class="logo">
    <span class="label">EC编程俱乐部</span>
  </div>
</template>

<style scoped>
.logo {
  width: 200px;
  height: 200px;
  background-image: url('./ecLogo.jpg');
  background-size: cover;
  position: relative;
}

.label {
  color: white;
  position: absolute;
  bottom: 0px;
  width: 200px;
  text-align: center;
}
</style>

【实战】水平垂直居中

<template>
  <div class="parent">
    <div class="child"></div>
  </div>
</template>

<style scoped>
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}

.child {
  background-color: green;
  width: 100px;
  height: 50px;
  position: absolute;
  /* 父元素宽度的50% */
  left: 50%;
  /* 向左偏移自身宽度的一半 */
  margin-left: -50px;
  /* 父元素高度的50% */
  top: 50%;
  /* 向下偏移自身高度的一半 */
  margin-top: -25px;
}
</style>

固定定位 position: fixed

相对于浏览器窗口进行定位，无论页面如何滚动，其位置都保持不变。（IE6不兼容）

position: fixed 必须配合 left,right,top,bottom 一起使用，否则元素还在原文档流的位置。

元素固定定位后，会发生以下变化：

• 脱离文档流（原文档流的位置不会保留）
• display 最终的值为 block/table ，但宽度不会自动撑满整行，还是由其内容决定 （无法设置宽高的内联元素在绝对定位后，也可以设置宽高）

【实战】返回顶部

<template>
  <div>页面的顶部</div>
  <a href="#" class="backtop">返回顶部</a>
</template>

<style scoped>
.backtop {
  box-sizing: border-box;
  padding: 8px 10px;
  position: fixed;
  bottom: 60px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: gray;
  text-align: center;
  line-height: 20px;
  color: white;
  text-decoration: none; /*去掉超链接的下划线*/
}
</style>

【实战】顶部导航

<template>
  <div class="page">
    <nav>我是导航</nav>
    <main>页面内容</main>
  </div>
</template>

<style scoped>
.page {
  /* 页面的顶部内边距与导航的高度相同，避免导航遮挡页面内容 */
  padding-top: 60px;
}
nav {
  position: fixed;
  top: 0;
  background-color: green;
  height: 60px;
  width: 100%;
}
main {
  height: 100vh;
}
</style>

黏性定位 position: sticky

• 当元素在浏览器窗口内时，随页面滚动
  
• 当元素抵达浏览器窗口的边框时，元素不再随页面滚动。
  
• 通过 top、left、right、bottom 属性，可以设置元素不再随页面滚动的具体位置
  
• 同时设置 top、bottom 时，上下两个方位的黏性效果会同时生效。
  
• 同时设置 left、right 时，左右两个方位的黏性效果也会同时生效。
  
• 多个黏性定位元素在同一容器中会重叠，在不同容器中会依次推开【推荐】，见链接
  
• https://demo.cssworld.cn/new/3/4-3.php
  
• 黏性定位元素的祖先元素中不能有可滚动元素。
  
• 黏性定位元素的父元素高度不能和黏性定位元素的高度相同（否则没有实现黏性效果的空间）
  

【实战】黏性导航

https://demo.cssworld.cn/new/3/4-1.php

【实战】通讯录的首字母滞黏

https://demo.cssworld.cn/new/3/4-3.php

【实战】层次滚动

https://demo.cssworld.cn/new/3/4-4.php

实现原理：

• 标题和网友评论都使用黏性定位
• 通过z-index: -1 默认隐藏网友评论
• 每个标题都在不同的容器