zoukankan      html  css  js  c++  java
  • 细说CSS样式表中的position属性

    在CSS中关于position定位的内容是:
    position: relative | absolute | static | fixed

    static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。

    relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。

    absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。

    fixed(固定定位)这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。


    CSS中定位的层叠分级:z-index: auto | namber;
        auto 遵从其父对象的定位
        namber  无单位的整数值。可为负数


    relative(相对定位)只可以在文本流中进行位置的上下左右的移动,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这就好比一个打工的人他到了外地,但是在老家依然有一个专属于他的位置,这个位置不随他的移动而改变。这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分就需要用到绝对定位。

    absolute(绝对定位)不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位,如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL(TOP、RIGHT、BOTTOM、LEFT简称TRBL)来设置元素,使之处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。

  • 相关阅读:
    Apache2的安装
    JVM(9) 程序编译及代码优化
    Java基础(43)Queue队列
    Java基础(42)AbstractSet类
    OptimalSolution(10)--日常
    OptimalSolution(9)--其他问题(1)
    OptimalSolution(9)--其他问题(2)
    OptimalSolution(8)--位运算
    OptimalSolution(7)--大数据和空间限制
    golang教程汇总
  • 原文地址:https://www.cnblogs.com/xugang/p/1593030.html
Copyright © 2011-2022 走看看