解读Position

原创
2016-09-08 08:29:16 1388浏览

首先Position在字面讲是位置的意思,在HTML中是定位的意思,它有四种属性:分别是static是静态的,也是默认的效果,没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。

absolute(绝对定位)

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

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

  fixed (固定定位)
生成固定定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  下面我用的实例具体讲一下Position的应用 :

  

三国杀





















  • 4






















  • 4





















  • 4





















  • 4





















  • 4





















  • 4





















  • 4


























    class="x1"

    class="x2"




    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一条:CSSPosition定位 下一条:常用meta整理