• 理解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定位,就变成元素左边线对应父块级元素的中线,结果就向右偏移了。

    优秀文章首发于聚享小站,欢迎关注!
  • 相关阅读:
    UVa 10118 记忆化搜索 Free Candies
    CodeForces 568B DP Symmetric and Transitive
    UVa 11695 树的直径 Flight Planning
    UVa 10934 DP Dropping water balloons
    CodeForces 543D 树形DP Road Improvement
    CodeForces 570E DP Pig and Palindromes
    HDU 5396 区间DP 数学 Expression
    HDU 5402 模拟 构造 Travelling Salesman Problem
    HDU 5399 数学 Too Simple
    CodeForces 567F DP Mausoleum
  • 原文地址:https://www.cnblogs.com/yesyes/p/15356422.html
Copyright © 2020-2023  润新知