zoukankan      html  css  js  c++  java
  • CSS:static/relative/absolute

    static - default and this is the FLOW.

    -------------------------------------------------------------------------------------------------------------------------

    relative - postition determined by first STATIC element.

    top、bottom、left、right

    保持文档流,占空间——保留自己在z-index:0层的占位。通过设置top、right、bottom、left值相对本身的原始位置发生位移。postition:relative不会改变display类型。

    在使用相对定位是,无论是否移动,元素仍然会占据原来的空间。因此,移动元素可以覆盖页面上的其他框。可以通过设置z-index属性来控制这些框的叠放次序。z-index值越高,框在栈中的位置就越高。

    -------------------------------------------------------------------------------------------------------------------------

    absolute - position determined by first NON-STATIC element.

    top、bottom、left、right

    脱离文档流,不占空间——不在z-index:0层保留占位符。通过设置top、right、bottom、left值相于距自己最近的非static祖先元素发生位移。(如果祖先元素全都没有设置,那就是相对body元素)position:absolute(和float)会隐性改变display类型为display:inline-block方式显示。

    注:display:inline-block

          inline-block 元素创建了一个行级的块容器,该元素内部(内容)被格式化成一个块元素,同时元素本身则被格式化成一个行内元素。

          简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,         使其既具有block的宽度高度特性又具有inline的同行特性。

     

          

     relative & abusolute相同点:

    两个参数都能改变对应元素在文档中的位置,并激活元素的top、right、bottom、left和z-index属性。

  • 相关阅读:
    2017寒假作业二 汇总随笔
    2017寒假作业一
    UVA 1601 POJ 3523 The Morning after Halloween 【双向BFS】【A*】 (好题)
    UVA 10570 Meeting with Aliens 【枚举+结论题】
    UVA 1614 Hell on the Markets 【贪心+结论题】
    UVA 10603 Fill【BFS】
    Codevs 1288 埃及分数 【IDA*】
    UVA 11212 Editing a Book 【IDA*】
    UVA 11624 Fire! 【特殊BFS】
    UVA 1599 Ideal Path 【两次BFS+贪心】 (好题)
  • 原文地址:https://www.cnblogs.com/xixihuang/p/5261298.html
Copyright © 2011-2022 走看看