zoukankan      html  css  js  c++  java
  • CSS(二)关于position

    position有五种取值

    前排说一个问题,2017-10-8日更新: transform会影响定位,导致fixed降级为absolute.无论是transform:translate(),scale()还是rotate(),只要是transform就会。

    • static:无特殊定位,小透明,都快忘了它了

      即是正常的文档流,不设置position默认就是它。

    • relative:相对定位的父亲

      如果仅仅是position:relative,它的表现同static一样。
      需要加top,bottom,left,right使其偏离正常位置。
      注意:relative不会使元素脱离文档流。即是说,其他元素不会因为它(relative的元素)的改变而改变。

    • fixed:下拉滚动条,它还在那里

      相对于浏览器可视窗口来定位,如我们要让上方导航栏不论风吹雨打(上下滚动)一直显示,就要给它设置 position:fixed
      fixed会使元素脱离文档流

    • absolute:绝对定位,我想在哪里在哪里

    如果有relative,则绝对定位以relative的元素为爸爸,否则按照body定位。 如果有非static定位的父级元素,则绝对元素以它定位,否则按照body定位。
    脱离文档流,原来的空间会被下面的文档流元素占掉!!

    • inherit:其实就是继承父级元素的position属性。

    • sticky:新增的布局(待更)

  • 相关阅读:
    【笔记】:sort排序大法
    【模块】:torndb
    【模块】:CSV文件 数据可视化
    【模块】:Pygal 绘制直方图
    【模块】:matplotlib 绘制折线图
    【Django】:重构Admin
    【数据结构】:基础
    【数据结构】:排序练习
    【数据结构】:算法(二)
    【数据结构】:算法(一)
  • 原文地址:https://www.cnblogs.com/can-i-do/p/6861991.html
Copyright © 2011-2022 走看看