css position定位会被继承吗,关于css position: absolute、relative定位问题

position 属性规定元素的定位类型。

属性定义

position值：absolute、fixed、relative、static(默认值。没有定位，元素出现在正常的流中(忽略

top, bottom, left, right 或者 z-index

声明)。)、inherit(规定应该从父元素继承

position 属性的值)

​

absolute、fixed、relative介绍

TRBL属性(TOP、RIGHT、BOTTOM、LEFT)​

设定position:absolute ：

​会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局。假如其他具有不同

z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。

有以下两种情况：

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

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

​

注意：

网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。有时还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。​

​

当设定position:

relative​：

参照父级(最近)的内容区的左上角为原始点结合TRBL属性进行定位(或者说相对于被定位元素在父级内容区中的上一个元素进行偏移)。

无父级则以BODY的左上角为原始点。

相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。

当设定position:

fixed​：​

fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、

"top"、 "right"、 "bottom" 属性进行定位。

​当我们需要使一个层相对于浏览器来自动调整该层的位置的时候，如果你使用position的absolute属性来定位该层，你会发现absolute属性并不能达到你想要的css效果。这时，就需要要用到fixed属性来定位该层了，当然，你如果不想用fixed属性的话，你是可以使用JavaScript语句来代替的。

属性值为 relative

会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。

在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。

区别：

1、当Position属性值为Relative时对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置。

Top的值表示对象相对原位置向下偏移的距离，bottom的值表示对象相对原位置向上偏移的距离，两者同时存在时，只有Top起作用。

left的值表示对象相对原位置向右偏移的距离，right的值表示对象相对原位置向左偏移的距离，两者同时存在时，只有left起作用。

2、当Position属性值为absolute时对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来。

Top的值表示对象上边框与浏览器窗口顶部的距离，bottom的值表示对象下边框与浏览器窗口底部的距离，两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。

left的值表示对象左边框与浏览器窗口左边的距离，right的值表示对象右边框与浏览器窗口右边的距离，两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。

3. fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

4. static

position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

​

​

​