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属性。

  • 相关阅读:
    性能调试工具
    c++11笔记
    根据样式创建内嵌页面
    VMware安装两张网卡
    【赵强老师】使用Oracle的跟踪文件
    【赵强老师】Kafka的消息持久化
    【赵强老师】Kubernetes的探针
    【赵强老师】阿里云大数据ACP认证之阿里大数据产品体系
    【赵强老师】NoSQL数据库之Cassandra基础
    【赵强老师】使用Weblogic的WLST工具
  • 原文地址:https://www.cnblogs.com/xixihuang/p/5261298.html
Copyright © 2011-2022 走看看