× 目录 [1]定义 [2]特性 [3]display [4]clip [5]overflow
前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位。因为相较于相对定位和固定定位,绝对定位在实际中应用频率更高、应用场景更广泛。本文将介绍使用绝对定位时的具体细节
当元素绝对定位时,会从文档流中完全删除。元素位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于初始包含块document,其边界根据偏移属性放置。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。定位元素不会流入其他元素的内容,反之亦然。
[注意]如果文档可滚动,绝对定位元素会随着它滚动,因为元素最终会相对于正常流的某一部分定位。
//滚动滚动条时会发现,绝对定位元素会随着其滚动,但固定定位不会
absolute和float都可以触发元素的BFC属性,且都具有包裹性和破坏性,所以对于一些应用场景,这两个属性可以进行替换。关于float属性的详细信息移步至此
【1】包裹性
元素绝对定位后,会为其后代元素建立一个包含块。且若该绝对定位元素不设置宽度,宽度由内容撑开。
[注意]浮动的包含块会延伸,进而包含所有后代浮动元素,但绝对定位的包含块并不会包含后代的定位元素,只是作为后代定位元素的定位父级
【2】破坏性
元素绝对定位后,会脱离文档流,若父级不设置高度,则父级高度塌陷;若父级为行内元素,无其他内容,则父级宽度也将塌陷
//父级元素有10px的padding,且背景颜色为天蓝色
【3】去浮动
元素绝对定位后,元素原来的浮动效果将失效
【4】偏移特性
如果使用top、right、bottom、left这4个偏移特性来描述元素4个边的放置位置,那么元素的高度和宽度将由这些偏移隐含确定,元素将会拉伸
使用偏移属性拉伸的绝对定位元素,其内部元素支持百分比width/height值。通常情况下,元素高度百分比要想起作用,需要父级窗口的高度值不是auto;但是如果容器由绝对定位拉伸形成,百分比高度值也是支持的
当元素绝对定位后,元素可以改变display属性,但各浏览器解析不一致。
【1】IE8+浏览器解析正常
【2】firefox和safari浏览器只有切换为display:none时才会重新渲染,其他值相互切换时无效
【3】chrome浏览器切换到display:inline时渲染无效,其他值想到切换时渲染正常
【4】IE7-浏览器将绝对定位的元素全部渲染为inline-block元素,只有切换为display:none时才会重新渲染,其他值相互切换时无效
[注意]解决IE7-浏览器绝对定位元素渲染为inline-block元素的bug很简单,只需要在绝对定位的元素外面套一个空的
<div> <div style="position:absolute"></div></div>
绝对定位或固定定位元素才可以使用clip属性。绝对定位元素常配合clip属性达到元素隐藏的效果。关于clip属性的详细信息移步至此
.hide{ position:absolute; clip: rect(0,0,0,0);}
当overflow在绝对定位元素和其包含块之间时,绝对定位元素不会被父级overflow属性剪裁。关于overflow失效解决方法移步至此
可以应用绝对定位元素的overflow属性失效实现按钮外置的效果
.box{ width: 100px; height: 100px; overflow: auto;} .in{ width: 100%; display: inline-block; height: 200px; background-color: pink;}.close{ position:absolute; margin: 0 0 0 -20px; font-size: 20px; line-height: 20px; border: 2px solid; border-radius: 50%; cursor:pointer;}
<div class="box"> <div class="in">测试内容</div><!-- --><span class="close">×</span></div>