• 理解CSS定位中的position


    position属性建立元素布局所用的定位机制,默认值static,称作静态位置。任何元素都可以定位,CSS中的定位通常指absolute定位、fixed定位和relative定位,除了static定位外的其他定位都可以使用top, right, bottom, left设置偏移距离,可以是正值和负值,默认值是auto。

    relative

    relative定位也叫相对定位,它是相对于自己原本的位置进行偏移,不会脱离文档流,也不会改变元素的类型,相对定位元素会为其所有子元素建立一个新的包含块,这个包含块对应于该元素原本所在的位置,值得注意的是当定位值为百分比时是基于包含块的宽高(不包括padding和border)。偏移距离在表象效果上,top值等于负的bottom值,left值等于负的right值,所以通常只设置top和left就可以了。

    absolute

    absolute定位叫绝对定位。绝对定位的元素无论其本身是什么类型都会生成一个块级框,绝对定位元素会脱离正常的文档流,定位是基于距离该元素最近的非static定位的祖父辈元素,绝对定位的元素的三大特性:

    包裹性

    参考例1

    当绝对定位作为父元素,会为其后代元素建立包含块,若绝对定位元素不设置宽度,宽度由子元素内容撑开。绝对定位的元素不会包含后代绝对定位元素,这也在情理之中,因为绝对定位的元素拥有破坏性,造成父元素高度塌陷。

    破坏性

    参考例2

    绝对定位后的元素会脱离文档流,因此如果父元素不设置高度,会造成父元素高度塌陷,无论父元素是在正常流还是定位流中。这种塌陷是无法修补的,只能设置固定高度。

    扩展:浮动元素也能造成父元素高度塌陷,但是可以通过清除浮动解决高度塌陷这个问题

    去浮动

    参考例3

    如果一个元素设置了浮动,元素绝对定位后浮动将失效

    偏移特性

    参考例4

    如果用top、right、bottom、left四个偏移特性来描述四个边的位置,元素的宽度和高度将会由这些偏移进行拉伸。例如如果四边设置为0,该元素会撑满父盒子(非static定位的距离最近的祖父辈元素),如果只设置了top或left,那么bottom和right的值是auto。如果包含块设置了固定宽高,偏移量可以使用百分比。

    fixed

    fixed定位也叫固定定位,它是相对于视窗定位(屏幕的可视区),它和绝对定位有很多相似的地方。fixed定位也会脱离文档流元素,无论其本身是什么类型也会生成一个块级框,也具有包裹性、破坏性和去浮动性。

    static

    static称作静态位置,也就是元素在正常文档中原本的位置。有一点值得注意,如果元素本身是static或relative定位,当使用text-align: center时是可以正常居中的,因为居中对齐是元素内容的中线对应父块级元素的中线,而如果使用absolute或fixed定位,就变成元素左边线对应父块级元素的中线,结果就向右偏移了。

    优秀文章首发于聚享小站,欢迎关注!
  • 相关阅读:
    Azureus 3.0.0.8
    KchmViewer 3.0
    GNOME 2.18.0 正式版颁发宣布
    Emacs 22.0.95
    gTwitter:Twitter 的 Linux 客户端
    KDE DVD Authoring Wizard-易用的 DVD 制造器材
    GIMP 2.3.15
    Monit-零碎看监工具
    Cobras-专注于 Qt 的 IDE
    K3b 1.0 正式版公布
  • 原文地址:https://www.cnblogs.com/yesyes/p/15356422.html
Copyright © 2020-2023  润新知