深入理解CSS绝对定位_html/css_WEB-ITnose

× 目录 [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很简单，只需要在绝对定位的元素外面套一个空的

即可

<div>    <div style="position:absolute"></div></div>

 

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;}

<div class="box">    <div class="in">测试内容</div><!--                  --><span class="close">&times;</span></div>