定位relative相对定位、absolute绝对定位、fixed固定定位

        作者有话说:在学定位之前有了解过吗？再没学浮动之前，这些块元素标签会出现在一列，要想实现并排就可以使用浮动float，现在我们可以学习定位，给背景图片或者图片、div、border等添加属性等，有定位在祖先级的、定位在浏览器的，比如说浏览京东页面时，当你拉动网页的时候页面会动，但是会有一个栏目始终保持在那个位置不动，这就是使用的定位，接下来一起看看吧！

定位使用position

        static  默认值，没有定位

        relative    相对定位

        absolute    绝对定位

        fixed   固定定位

1.relative相对定位

相对定位：设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置，但是原来的位置会被保留下来，且仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响。

使用相对定位：position: relative;

riht:Npx;                                        //相对原来的位置距离右边移动Npx

left:Mpx;                                       //相对原来的位置距离左边移动Mpx

top:Fpx;                                       //相对原来的位置距离顶部移动Fpx

bottom:Epx;                                //相对原来的位置距离底部移动Epx

大概图示：

 注意：相对自身原来位置进行偏移

2.absolute绝对定位

        重点了解：使用绝对定位的时候需要用position: relative;作为absolute的父级定位，因为relative不会让父级脱离文档流 而absolute绝对定位和fixed固定定位会脱离文档流，但是它们对其他元素的定位不会造成影响，并且absolute绝对定位以它最近的一个“已经定位”的“祖先元素”为基准进行偏移，最近的定位包括绝对、相对和固定任何一个。如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位，相对相对在使用定位偏移后依旧保留原来的空位置，但是absolute绝对定位和fixed固定定位元素位置发生偏移后，它原来的位置不会被保留下来。设置了绝对定位但是没有设置偏移量的元素将保持在原来的位置，有时候在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况。

使用绝对定位：首先给父级定位position: relative;

                         然后使用绝对position: absolute;        top：Npx；bottom: Mpx...

大概图示：

3.fixed固定定位

固定定位相对浏览器窗口来定位，偏移量不会随滚动条的移动而移动

固定定位一般使用在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定偏移量。

注意：这个就不是相对于原来位置使用偏移量了，而是根据浏览器窗口设置的位置，

使用固定定位：依旧首先给父级（祖先辈...）定位position: relative;

                         然后使用绝对position: fixed;        top：Npx；bottom: Mpx...

大概图示：

下面是一个页面哦

注释：有人可能不太懂在绝对定位absolate和固定定位fixed中position: relative;的作用，就像你跑步400米一样，首先你得知道自己在哪个操场，确定自己的跑道，才可以对吗！我们这里的偏移量（top：Npx；bottom: Mpx...）就是规定你是跑400米还是800米，position: relative;就是确定你的跑道。那么哪个是你呢？需要定位的div或者img就是你啦。固定的跑道就是使用的绝对定位，跑道上教官就是固定定位，即使所有人都在移动，教官也不用跑就在固定的位置计时就可以了。哈哈不知道有没有了解一点呢？

这篇好文章是转载于：学新通技术网