详解css中position属性_html/css_WEB-ITnose

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

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

 

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

 

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

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

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

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

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

 

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

一、static

              这个布局为默认的布局，所以可说可不说，大家都比较熟悉了

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

             

二、fixed

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

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

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

             

三、absolute

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

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

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

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

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

              一般来讲，居中效果的话用Absolute就容易出错，因为页面一直是随着分辨率的大小自动适应的，

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

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

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

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

             

四、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;            }

 下面分几个情况来说明上图的意思：

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

 

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

 

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

 

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

如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止。