携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

网页布局技术——定位

定位(position)

定位允许HTML元素脱离正常的文档流布局，并使它们具有其他的行为:

• 例如覆盖在另一个元素之上;
• 又或者始终固定在浏览器窗口内的同一位置;

网页中定位效果展示

1.遮罩层

遮罩层实现全细节 >>>戳进去看看

网易云音乐,透明四分之一圆遮罩层

王者荣耀,透明全框遮罩层

2.固定挂件

王者荣耀,侧边栏

京东官网,侧边导航

3.装饰小图标

京东商城，购物车商品数量

网易云音乐，hot图标

position属性

取值	名称	效果
static	静态定位(默认值)	元素按照标准流布局 (不脱标) , top、bottom、left 、right等属性不起作用
relative	相对定位	元素按照标准流布局 (不脱标) ，可以通过top、bottom、left 、right进行定位，定位参照对象是自身在标准流布局中的位置
absolute	绝对定位	元素脱离标准流 （脱标） ，可以通过top、bottom、left 、right进行定位，定位参照对象是最邻近的祖先定位元素， 如果找不到这样的父级元素，参照对象是视口。 定位元素（positioned element），position值不为static的元素， 也就是position值为relative、absolute、fixed的元素
fixed	固定定位	元素脱离标准流 （脱标） ，可以通过top、bottom、left 、right进行定位，定位参照对象是视口（viewport）， 当画布（canvas）滚动时，固定不动
sticky	粘性定位	可以看做相对和固定定位的结合体;它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点; 当达到这个阈值点时, 就会变成固定定位; sticky是相对于最近的滚动祖先包含视口

定位元素特点

• 1.可以设置宽高(不管是块级元素还是行内元素)

• 2.宽高默认由内容撑开

• 4.不再给父元素汇报宽高数据

• 5.脱标元素内部默认还是按照标准流布局

定位相关属性——z-index

z-index 属性 z : z轴; index : 指数;

x 轴代表水平方向，y 轴代表垂直方向，z 轴则代表我们的目光向页面（屏幕）看进去

z-index根据指数,设置元素在z轴上的层叠顺序（仅对定位元素有效）

取值可以是正整数、负整数、0;值越大，元素就离我们“越近”，值越小，元素自然也就离我们“越远”;

默认值为auto;

比较规则

兄弟关系

z-index越大，层叠在越上面

z-index相等，写在后面的那个元素层叠在上面

非兄弟关系

各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较

而且这2个定位元素必须有设置z-index的具体数值

常见使用技巧

1.子绝父相

在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位

如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：

父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）

子元素设置position: absolute

简称为“子绝父相”

2.绝对定位元素居中显示

绝对定位元素（absolutely positioned element）

——position取值为absolute或者fixed的元素

对于绝对定位元素来说,

定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度

定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度

如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性 left: 0、right: 0、top: 0、bottom: 0、margin:0

如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性 left: 0、right: 0、top: 0、bottom: 0、margin: auto另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）

各定位属性区别

	脱离标准流	定位元素	绝对定位元素	定位参照对象
static 静态定位	×	×	×	×
relative 相对定位	×	√	×	元素自身在标准流中的位置
absolute 绝对定位	√	√	√	最邻近的定位祖先元素（如果找不到这样的祖先元素，参照对象是视口）
fixed 固定定位	√	√	√	视口