CSS中三种定位介绍

在这段时间对CSS学习中到今天也终于能收个尾了，小编这篇会对CSS中的3种定位做一个详细介绍

1.相对定位

相对定位：相对于自己原来的位置进行移动。

实际代码操作：对于标签样式先声明

position:relative;

再描述移动方向与像素大小

left带正数向右移，以此类推正数情况下方向相反，那么在这种情况下对于初学的我门这种定位可以以带负数形式就与标签头方向相同了。

值得我们注意的是一个口令：不脱标 老家留坑 形影分离

这三个相对定位的性质值得我们注意，以相对定位移动盒子后盒子时不脱离标准流的，所移动的是一个“虚影”，并非整个盒子往那边移动所以“老家留坑”。

相对定位在实战中用得比较少，一般用于盒子微调。

2.绝对定位

绝对定位：移动相对于页面顶

position:absolute;

在介绍绝对定位时我们同时引入一个概念：参考点

绝对定位定位时按照参考点来引入移动。

绝对定位使用后脱标。

1.top，bottom参考点

这是在使用绝对定位时非常难以理解的一个点，在这个情况下使用这两个方向是与相对定位不同的。

top在定位时以网页左上方顶点为原点移动而不是浏览器左上顶点。

而bottom就更难理解一点这里小编以搜集来的一道面试题来讲解一下：

答案：

 

那么这边做一下解释：bottom属性绝对定位时所参考的是浏览器首屏页面的左下顶点。根据题目来理解含义很方便。

2.引入祖先标签后参考点改变

这边说一下当所需定位标签“祖辈”标签也有定位时那么该盒子的参考点为祖辈盒子，同时当很多祖辈都有定位时以最近祖辈盒子作为参考点。

一般以“子绝父相”实用。

绝对定位后的盒子无视padding，这点在这一部分用得最多。

3.绝对定位盒子居中

因为盒子绝对定位后脱标所以margin:0 auto;失效

那么我们做公式记一个：

   width: 600px;
   height: 60px;
   position: absolute;
   left: 50%;
   top: 0;
   margin-left: -300px;   → 宽度的一半

3.固定定位

固定定位，不明思议就是固定盒子不随网页滑动而移动

固定定位盒子也脱标

position:fixed;

这边这个也不多做介绍，在实战中用到修饰导航条和点击置顶比较多。

4.z-index

该属性描述的是定位盒子覆盖问题，只有有定位属性的标签才有。

在没有书写该属性时，如有两个盒子有重合冲突的覆盖问题时那么写在HTML后的标签会覆盖之前的。

写了之后那么就是z-index大的覆盖小的。

注意：z-index从父，如果某两个个标签的“父亲”都同时有z-index属性那么就不需要管儿子的z-index属性，不管儿子是多少，孩子父亲大的就覆盖那个父亲z-index小的孩子。

定位总的来说在站中使用的也有，我们主要是要明了操作才更方便之后的做站。