× 目录 [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
当元素绝对定位后，元素可以改变display属性，但各浏览器解析不一致。
【1】IE8+浏览器解析正常
【2】firefox和safari浏览器只有切换为display:none时才会重新渲染，其他值相互切换时无效
【3】chrome浏览器切换到display:inline时渲染无效，其他值想到切换时渲染正常
【4】IE7-浏览器将绝对定位的元素全部渲染为inline-block元素，只有切换为display:none时才会重新渲染，其他值相互切换时无效
[注意]解决IE7-浏览器绝对定位元素渲染为inline-block元素的bug很简单，只需要在绝对定位的元素外面套一个空的
clip
绝对定位或固定定位元素才可以使用clip属性。绝对定位元素常配合clip属性达到元素隐藏的效果。关于clip属性的详细信息移步至此
.hide{ position:absolute; clip: rect(0,0,0,0);}
overflow
当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;}
测试内容×
