静态定位
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 默认隐藏网友评论
- 每个标题都在不同的容器