zoukankan      html  css  js  c++  java
  • CSS中定位position

    毋庸置疑的是,pisition是css中是最重要的属性之一。

    一共有四种定位方式,static、relative、absolute、fixed。


    默认的定位方式static

    页面中所有的元素默认都是static的。静态定位意味着所有的元素都以代码顺序定位在页面上。块元素显示在块元素下面,行元素显示在行元素后面。


    Relative positioning

    设置定位为relative并不会在页面的现实上有太大的不同。但可以区别于普通定位方式,使用top、left、bottom、right的CSS属性。需要偏移、相对定位而不是固定在某个位置的时候,relative定位是非常有用的。


    Absolute positioning

    一个absolutely的元素,在页面上相对于document或者一个非static的父元素。可以使用top、left、bottom和right这些css属性,可以精确定位元素。它支持水平和垂直居中。


    Fixed positioning

    给一个元素增加fixed定位,元素将相对浏览器窗口定位。fixed可以用来制作toolbars、button以及导航菜单menu,这些可以在一个固定的位置,随着页面一起滚动。最大的问题是,ie6等老的浏览器不支持。所以需要JS支持。


    总而言之

        static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
        relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
      absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
        fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

  • 相关阅读:
    HDU4385Moving Bricks【状压DP】
    用位运算实现加减法
    hdu 1874(最短路 Dilkstra +优先队列优化+spfa)
    codeforces 782B The Meeting Place Cannot Be Changed+hdu 4355+hdu 2438 (三分)
    hdu 1542(线段树+扫描线 求矩形相交面积)
    hdu 2602(经典01背包)
    hdu 1698(线段树区间更新)
    hdu 1754(单点更新 ,区间最大值)
    NYOJ 寻找最大数
    hdu 2222(AC自动机模版题)
  • 原文地址:https://www.cnblogs.com/ae6623/p/4416502.html
Copyright © 2011-2022 走看看