首页 > 代码库 > position定位

position定位

position的英文意思呢是位置,方位; 地位,职位; 态度; 状态;

它有定位有四个值分别是绝对定位的两个值absolute和fixed,相对定位的relative,还有一个默认的值static而它呢没有定位。

技术分享

下面呢,我说先说一下:

    position的值,relative和absolute分别是相对于谁来进行定位的?

      absolute:生成绝对定位的元素,它是相对于最近一级的定位,而不是static的父元素来进行定位。

      fixed (老IE不支持)  也是生成绝对定位的元素,但是它是相对于浏览器窗口或者是frame来进行定位。

      relative 生成相对定位的元素,相对于其在普通文档流中的位置进行定位。

      static 默认值。没有定位,元素出现在正常的文档流中。

 

然后呢,我说一下:

    CSS的定位

      relative :相对定位,元素呢仍然处于正常的文档流中,但是可以通过 left、top、right 和 bottom 的 CSS规则来改变元素的位置。

      absolute :绝对定位,元素脱离了正常的文档流,但是呢也可以通过left、top、right 和 bottom 的 CSS规则来改变元素的位置。

      fixed :固定定位,元素脱离正常的文档流,也可以通过left、top、right 和 bottom 的 CSS规则来改变元素的位置。

      static :默认值,元素将按照正常文档流的规则来排列。

技术分享

 

最后呢我要说:

    position的值不只有这四个,比如还有:

      以上图片上的inherit

      inherit :它规定应该从父元素继承 position 属性的值。

 

但是呢这是肯定又会有人说那么?z-index它不属于position的值么?以及它和position是什么关系?

    准确的说z-index呢它确实是不属于position的值。

    z-index要和position搭配起来用,具体用法如下:

  1、.a{

 

        position:relative;

 

        z-index:99;

 

    }

 

  2、   position可以为relative(相对定位,)、absolute(绝对定位)、fixed(固定位置),inherit(继承父级特性)然后通 过top、right、bottom、left来进    行控制。relative是相对于原来的位置进行控制。absolute和fixed都是相对于文本的 左上角进行定位。如果父级用了relative,则absolute是相对于父级进行    的。

  3、如果没有加position时使用z-index是没有效果的,那么层级关系就会错乱,出现不想要得到的效果。

 

  如果大家还有什么不明白的话可以点此链接进行进一步的了解:http://www.w3school.com.cn/cssref/pr_class_position.asp

  技术分享

position定位