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

  • 相关阅读:
    【文言文】从高考到程序员
    lambda方法引用总结——烧脑吃透
    秒杀苹果carplay baidu车联网API冷艳北京车展
    东君误妾我怜卿(一)
    百度快照投诉技巧案例分析百度快照就是这样刷出来的
    新浪博客是否可以放谷歌广告?如何添加
    与葡萄酒的亲密接触-选购技巧篇
    车联网高速公路智能交通解决方案
    物联网细分领域-车联网(OBD)市场分析
    APP开发选择什么框架好? 请看这里!
  • 原文地址:https://www.cnblogs.com/xixihuang/p/5261298.html
Copyright © 2011-2022 走看看