Maison >interface Web >tutoriel HTML >深入理解CSS绝对定位_html/css_WEB-ITnose

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

WBOY
WBOYoriginal
2016-06-24 11:22:511414parcourir

× 目录 [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>

 

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn