定位基础知识

一、任务目标

理解什么是脱离文档流

掌握position定位的特性与使用

掌握层级属性z-index的使用

二、任务背景

在一个网页的排版布局中，定位属性是最重要的属性之一，能够熟练使用定位布局对页面美化有很好的帮助。

三、任务内容

1、什么是脱离文档流

文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，称为文档流
元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流的上方，此时元素层级发生变化

2、position定位

position属性用于指定元素的定位类型，属性值可为

• static（默认定位）

• relative（相对定位）

• absolute（绝对定位）

• fixed（固定定位）

• sticky（粘性定位）

设置定位类型后可以通过设置top、right、bottom、left属性确定定位的位置

2.1 static定位

• 页面上的每个盒子从上到下、从左到右依次排列的布局

<div class="box-container">
	<div class="box1">box1</div>
	<div class="box2">box2</div>
</div>

2.2 relative定位

• 相对于元素自身原始位置定位，元素不脱离文档流，即原来元素所占的空间不会改变

上述static定位示例代码中，将box1设置以下属性，元素会相对于自身原始位置向右偏移20px，向下偏移50px

    .box1 {
    	position: relative;
    	top: 50px;
    	left: 20px;
    }

2.3 absolute定位

• 元素相对于最近的非static定位的祖先元素定位进行偏移，元素脱离文档流

上述static定位示例代码啊中，将box2以及其父级元素box-container设置如下属性

box2元素相对于relative定位的box-container向右偏移25px，向下偏移30px

.box-container {
	position: relative;
}
.box2 {
	position: absolute;
	top: 30px;
	left: 25px;
}

2.4 fixed定位

• 相对于浏览器窗口进行定位，元素脱离文档流

常用于顶部导航栏、顶部搜索框、侧边联系客服等板块

2.5 sticky定位（存在兼容性问题）

• 根据自身原始位置或浏览器窗口进行固定定位，类似relative和fixed的结合

常用于页面的搜索工具栏，初始加载在默认位置（相当于relative），页面向下滚动时，工具栏固定在页面头部（相当于fixed），页面重新向上滚动，工具栏也会回到默认位置

3、层级属性z-index

• 用于设置元素的堆叠顺序，该属性仅能在非static定位的定位元素上生效

• 数值越高，层级越高，层级高的元素会覆盖层级低的元素（层级高的元素会在层级低的元素上方）

z-index属性值相同时，遵循后来者居上的原则，后面的元素会覆盖前面的元素

上述absolute定位的示例中，给box1、box2添加背景后可以清晰看见，box2覆盖box1

将box1、box2增加以z-index属性，可将box1、box2层级改变，使box1在box2的上方

.box1 { z-index: 1; }
.box2 { z-index: 0; }