房子装修工程师CSS(二)之定位position

一、深度讲解css定位position

（一）absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。祖上元素都没定位就相对第一个即最外层的祖先元素进行定位，如果有祖上元素设置了position：relative、absolute、fixed就相对此祖上元素定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

（二）fixed：生成固定定位的元素，相对于浏览器窗口进行定位。

（三）relative：生成相对定位的元素，相对于自身正常位置进行定位。

（四）static：默认值。没有定位，元素出现在正常的流中。

（五）inherit：规定应该从父元素继承 position 属性的值(这种情况一般可忽略)。

  Example1:相对定位，相对于自身定位。

 代码：

效果图：红色框框就是child自身的位置，然后相对自身移动50px。

 Example2:绝对定位；由于o3的父级没有设置position，因此相对于最外层元素进行定位。

 

 

示例图：

由于浏览器都有默认的margin/padding，导致如上图，需要对默认浏览器margin/padding进行处理如下图所示：

之后得到示例图如下图所示：

对于上图，假设有疑问到底是对最外层定位还是对第一个父级（蓝色框）进行定位呢？我们可以做一个实验，把蓝色框框进行移动，假设绿色框不动，那证明就是相对最外层元素进行定位。如下图所示，

对o1进行设置：  

      

示例图如下，可见并没有随之移动！

Example3:绝对定位；由于o2的父级没有设置position，因此相对于父级进行定位，会随着父级o2位置的移动而移动。

代码如下：

示例图：