详解css中position属性

最近画富瑞的界面，不少元素的定位都是个问题（在我没有很详细的知道position属性以前）

后来上网查了下关于position的一些相关的属性和用法，遂整理了一下

 

position：属性：固定元素的定位类型。即元素脱离文档的布局流，在元素的任意位置显示。

 

关于position的属性值，有四种：

一、static：默认布局（默认值）

二、fixed：固定定位，顾名思义是固定的意思，和absolute定位相似，可是比absolute更”定“！（不随滚动条的滚动而滚动）

三、relative：相对定位，脱离文档的布局流，可是会在文档的原先位置留下空白

四、absolute：绝对定位，脱离文档的布局流，在文档中不会留下位置

 

下面简答的说下这几种定位方式：

1、static

              这个布局为默认的布局，因此可说可不说，你们都比较熟悉了

              这就是意味元素没有被定位，并且在文档出如今它应该出现的位置上

             

2、fixed

              fixed定位的对象是以body为定位的对象，简而言之就是根据整个窗口（page）进行定位，经过（t,r,b,l）来进行定位，

              若是你的scroll设置为false的话，这个定位就很吊了！，不少网站的广告就是这个鬼

              其实感受网上都说得很麻烦，在个人理解，fixed就是把这个元素钉死在屏幕的这个点上，别的都无论（简单粗暴）

             

3、absolute

              绝对定位，这是将对象抽离出正常的文档流进行定位的一种方式，是将元素从整个文档中飘出来，而元素自身的物理空间也会

              天然而然的消失，不像relative还会有原来的物理位置

              若是父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位

              若是父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。

              当设定position: relative 则参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，不管元素是否进行移动，元素依然占据原来的空间。所以，移动元素会致使它覆盖其余框。

              通常来说，居中效果的话用Absolute就容易出错，由于页面一直是随着分辨率的大小自动适应的，

              而Absolute则会以手机屏幕的左上角为原始点，不会应为分辨率的变化而变化位置。有时还须要依靠z-index来设定容器的上下关系，数值越大越在最上面，

              数值范围是天然数。固然有一点要注意，父子关系是没法用z-index来设定上下关系的，必定是子级在上父级在下。

              在绝对(absolute)定位对象以后的文本或对象在被定位对象被拖离正常文档流以前会占有它的天然空间。

              放置绝对(absolute)定位对象在可视区域以外会致使滚动条出现。而放置相对(relative)定位对象在可视区域以外，滚动条不会出现。

             

4、relative（感受我理解的也不是特别的透彻）

              从应用的角度来讲，relative经常使用于包含有absolute元素的容器元素上。absolute元素默认以body作为容器元素进行绝对定位。

              若是你想在页面一个特定区域进行绝对定位，就能够在absolute元素外包裹一层容器元素应用relative样式。

              形象一点说，相对定位是很是自私的

              其最大特色是：本身经过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。

              相对定位也比较独立，作什么事它本身说了算，要定位的时候，它是以本身自己所在位置偏移的（相对对象自己偏移）。

              其中relative须要理解最重要的一点就是相对于自身定位：也就是说

              relative是相对于本身来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

             

最后说明下relative和absolute结合使用的一种状况

先说明一句话：

              绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置，那么绝对定位的元素的参考物就是html

在强调一点：relative是相对于自身定位，absolute是相对父级元素定位的

 

举个栗子（网上找的，感受说的灰常好）

（这里放不了图很很差，不过你们能够脑补嘛）

上图作为一个实例来讲明“relative”和“absolute”的关系，首先上图中共有三个div放在body内，

并且他们三个div的关系是“div-1>div-2>div-3”,并且在div-3有这么一个绝对定位：

.div-3 {
                position: absolute;
                left:0;
                top:0;
            }

 下面分几个状况来讲明上图的意思：

一、div-1与div-2都没有设置“position:relative”，此时咱们的div-3绝对定位后就漂到了上图中“div-3c”的位置上；

 

二、如今咱们在div-2元素中加设置一个“position: relative”，此时咱们的div-3绝对定位后就漂到了上图中的“div-3a”的位置;

 

三、接下来把相对定位的设置换到div-1元素上，此时div-3绝对定位后就到了div-3b的位置。

 

花这么多心思，我只想说明一点：若是一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，

若是有设置将以离本身最近元素定位，若是没有将往其祖先元素寻找相对定位元素，一直找到html为止。