relative会脱离⽂档流吗_cssposition：absolute脱离⽂档流详
解
原标题：css position: absolute脱离⽂档流详解
CSS2.0 HandBook上的解释：
设置此属性值为 absolute 会将对象拖离出正常的⽂档流绝对定位⽽不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，⽽会在同⼀位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的⾄少⼀个，并且设置此属性值为 absolute 。否则上述属性会使⽤他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前⼀个对象之后⽴即被呈递。
TRBL属性(TOP、RIGHT、BOTTOM、LEFT)只有当设定了position属性才有效。
当设定position:absolute
如果⽗级(⽆限)没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上⾓为原始点进⾏定位
如果⽗级(⽆限)设定position属性，那么当前的absolute则结合TRBL属性以⽗级(最近)的左上⾓为原始点进⾏定位。
当设定position: relative
则参照⽗级(最近)的内容区的左上⾓为原始点结合TRBL属性进⾏定位(或者说相对于被定位元素在⽗级内容区中的上⼀个元素进⾏偏移)，⽆⽗级则以BODY的左上⾓为原始点。相对定位是不能层叠的。在使⽤相对定位时，⽆论元素是否进⾏移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。
⼀般来讲，⽹页居中的话⽤Absolute就容易出错，因为⽹页⼀直是随着分辨率的⼤⼩⾃动适应的，⽽Absolute则会以浏览器的左上⾓为原始点，不会应为分辨率的变化⽽变化位置。有时还需要依靠z-index来设定容器的上下关系，数值越⼤越在最上⾯，数值范围是⾃然数。当然有⼀点要注意，⽗⼦关系是⽆法⽤z-index来设定上下关系的，⼀定是⼦级在上⽗级在下。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前⼀个对象进⾏
偏移。在相对(relative)定位对象之后的⽂本或对象占有他们⾃⼰的空间⽽不会覆盖被定位对象的⾃然空间。与此不同的，在绝对(absolute)定位对象之后的⽂本或对象在被定位对象被拖离正常⽂档流之前会占有它的⾃然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。⽽放置相对(relative)定位对象在可视区域之外，滚动条不会出现。其实对于定位的主要问题是要记住每个定位的意义。相对定位是“相对于“元素在⽂档流中初始位置的，⽽绝对定位是”相对于“最近的已经定位的祖先元素。
以下是补充：
虽然有知道css的绝对定位(absolute)、相对定位(relative)，但却从未⾃⼰动⼿写过相关的效果！
忙活了⼀⼤半天，也算是完成了！也把这两个属性搞明⽩了⼀些！
总结如下：
先看下⾯这⼀个层结构
此层只应⽤position：relative；样式
此层只应⽤position：absolute；样式
不应⽤样式
1、absolute：不占位、relative：有占位！
如上层结构:
id为rel的层在显⽰时，会占⽤⼀⾏！其后⾯的abs层只会在下⼀⾏显⽰出来！
id为abs的层在显⽰时，会与后⾯id为sss的重叠在⼀起！
2、默认情况下(不结合top等来定位)，absolute(绝对定位)以⽗层来定位的
如上⾯的id为abs的层，如果不结合top等来定位，则其显⽰位置会随⽗级posi层(posi在⽂档左下⾓，其也会在左下⾓)
absolute relative3、在结合top、bottom、right、left等属性时，absolute(绝对定位)以窗⼝做为定位，relative以⾃⾝的占位为基线做偏移！如下：
不应⽤样式
此层应⽤position：relative;bottom：30px；样式
此层只应⽤position：absolute;bottom：30px；样式
以上代码：
id为rel的层会上移并与id为sss的层重叠
id为abs的层会以窗⼝为基线，移⾄距离窗⼝30像素的位置！
4、在结合top、bottom、right、left等属性时，如果想absolute(绝对定位)能以⽗层做为定位基线的话，则在⽗层应⽤absolute或relativ 属性就可以!如下：
此层应⽤position：relative;bottom：30px；样式
此层只应⽤position：absolute;bottom：30px；样式
以上代码：id为posi的层，也可以⽤absolute属性！
id为rel的层，不受影响，以⾃⾝的占位为基线做偏移！
id为abs的层是以id为posi层的底边做为定位基线，如果此时posi层的⾼度⼩于30px的话，abs层可能没办法看到哦！返回搜狐，查看更多
责任编辑：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。