文献种类：专题技术总结文献
开发工具与关键技术： DW && CSS
作者：谢文锦 ；年级：2004 ；撰写时间：2021 年 6 月 24日
文献编号： 归档时间： 年 月 日
定位的意义
CSS为定位和浮动提供了一些属性，利用这些属性可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
首先我们得理解定位的基本思想，也就是定位是该用来干嘛的，什么时候能使用它，为什么要用它，它的思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器视口本身的位置。
“它允许你定义元素框相对于其正常位置应该出现的位置”这句话怎么理解呢？我来举个例子吧，其实就像一面镜子，当你照镜子的时候，镜子会从中反射出另一个自己，那么以你为中心点，镜子里的右手是相对于现实中的左手而生成的一个镜像。
定位里有一个主要的属性为：position，它的属性值有四个，但最重要的有三个值分别为：relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。我们先让大家知道这三个属性值的作用和效果再去讲解，这样会比较好理解没有那么抽象。下图依次为HTML文档、CSS文档、页面效果图。
这里注意！position和属性值relative、absolute、fixed一般都要与right:数值+px;left:数值+px;top;数值+px;bottom:数值+px;这四个值或者其中之一配合使用效果才显而易见。
可以看出box往左边移动了一点，这里就可以把下面那个box2比作自己，而box2比作镜子里的另一个自己，这样就不难理解为什么我设置的right:10px;不是向右边移动而是往左边移动了，不过要注意了，这只是我想要利用这种说法和例子好让大家更好地记忆。当让这个10也可以为-10，当像素为负数的时候那么这个box就会往反方向移动了。一定要记住了！！！
接下来要看仔细了！
把box2放到box标签里面。
然后把box的right属性值去掉，再给box2一个absolute属性值和属性right。这个时候出现的效果会怎么样呢？你们不妨试一下结果再回来看答案。
这就是定位的强大之处，能肆意移动这个盒子的位置。还有就是这个absolute，也就是这个绝对定位，它还有一些小细节，我们来试试把box的position属性给去掉看看会发生什么。
能看到，仅仅只是把position去掉，box2就与box分离了，这是因为绝对定位的元素的位置是相对与最近的已定位父元素。通俗点说就是要在box是box2的父元素的情况下，box设置了相对定位，而box2设置了绝对定位，box2就会以box作为自己要定位的点而改变自己的位置。我们接下来再把box2的right改为left试试看。
此时我并没有给box设置样式position:relative。
结果是box2紧贴左边一点空隙都不留，而对比一下一开始没有设置绝对定位的情况和给box设置了相对定位的情况来看，是不对劲的，这说明设置了绝对定位的父元素没有设置相对定位的话，绝对定位就会往上找到这个网页的视口，也就是标签<html></html>。如果box2有两个父元素标签，而两个父元素都有相对定位那么box2就会找到离box2最近的父元素标签。
最后就是fixed，也就是固定定位，这个很好理解，它不同于相对与绝对，它直接就是找到页面视口然后来进行位置的移动的。
上面两张页面效果图仔细看滚动条的位置，这便是fixed（固定定位）的效果啦。它会一直在那个位置，无论你的滚动条滚到哪。这就是最最最简单的固定定位！
3812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
