Absolute定位

absolute(绝对定位)

absolute使元素从文档流中完全删除,并相对于其最近的包含块定位。包含块可能是文档中的另一个元素或初始包含块。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。绝对定位使元素的位置与文档流无关,因此不占据空间:

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

如下图所示:

绝对定位元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(如:body)

提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。


通常情况下,使用relative定位元素作为absolute元素的父元素,以便使absolute元素可以相对其进行定位。


2.1 包裹性

使用absolute绝对定位的元素会对其子元素产生包裹性

<style type="text/css">
	.father{
	    border: 2px solid deeppink;
	    width: 200px;
	}
	.son1 {
	    position: absolute;
	    border: 2px solid blue;
	}
	.father img {
	    width: 128px;
	}
</style>
<div class="father">
  <div class="son1">
    <img src="a.jpg">
  </div>
</div>



2.2 高度塌陷

导致高度塌陷是因为设置了absolute的元素脱离了文档流,其父元素认为自己没有子元素,所以产生了高度塌陷。

如果在父元素中增加子元素,如下:

<style type="text/css">
	.father{
	    border: 2px solid deeppink;
	    width: 200px;
	}
	.son {
	    position: absolute;
	    border: 2px solid blue;
	}
	.father img {
	    width: 128px;
	}
</style>
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
    美女1,美女2,美女3,美女4,美女5
</div>

由图见,文字被图片遮盖了;这一点和float不同。因为float元素本身仍处于文档流中,文字会环绕着float元素,不会被遮蔽,而设置了absolute的元素出现了层级关系,已经脱离了正常的文档流;从父元素的视点看,图片已经完全消失不见了,因此从最左边开始显示文字,而absolute的层级高,所以图片遮盖了文字。


2.3 块状化

块状化:是指一旦元素position的属性为absolutefixed,则其display就是block或table。


2.4 摆脱overflow的限制

absolute元素可以摆脱overflow的限制,无论是滚动还是隐藏;如下图:

尽管absolute元素(关闭按钮)在overflow元素内部,但并不会对absolute元素产生任何影响;absolute元素不会随着滚动而滚动;


2.4 使用absolute后,元素的float将失效,两者相斥;


2.5 偏移特性

如果absolute元素使用top、right、bottom、left这4个偏移特性;则元素的高、宽将由这些偏移隐含确定,元素将可能被拉伸。absolute元素拉伸时,其内部元素的width、height可以使用百分比。


2.6 改变display

改变absolute元素的display属性,各浏览器解析不一致:

【1】IE8+浏览器解析正常

【2】firefox和safari浏览器只有切换为display:none时才会重新渲染,其他值相互切换时无效

【3】chrome浏览器切换到display:inline时渲染无效,其他值相互切换时渲染正常


2.7 静态位置

当元素绝对定位后,若该元素的格式化属性不发生变化,则该元素处于静态位置。关于绝对定位元素格式化的相关内容移步至此。元素的静态位置是指元素在正常流中原本的位置,更确切的讲,顶端的静态位置是从包含块的上边界到假想框的上外边距边界之间的距离。假想框是假设元素position属性为static时元素的第一个框。

但对于居中对齐的行内元素来说,将元素设置为absolute或fixed会发生静态位置跳动问题。而relative或static则不会有此问题。这是因为元素默认的居中对齐是元素的内容中线对应父级块级元素中线,而当元素绝对定位或固定定位之后,定位元素左边界将与其父级块级元素的中线对齐。




举报

© 著作权归作者所有


0