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

　　

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有