css中left与margin-left和position:relative与position:absolute的区别

主要区别可以总结为：

1、left指令要生效，必须其有position：relative或者position：absolute的定位才能执行；margin-left则不需要。

2、position:relative 只能定位在当前位置，受其父div位置的控制；position:absolute可以使div脱离文档源，位置由上一个有定位的祖div控制。

为了方便观察，我把背景颜色换了，然后把系统自带的内边距外边距都取消了）

具体输入*{background-color: #eee;?margin: 0px;?padding: 0px;}

1.1 生成一个div，输入{border: 1px red solid;? height: 200px;? width: 200px;? left: 50px; } 其效果图为:

这时候输入了left=200px，但是div并没有移动，这是由于他没有被定位，所以left指令无法实行。

1.2 但是如果对这个div进行相对定位或者绝对定位，那么它会定位在他所出现的位置，然后对left或top的指令再进行移动。这次我们把position：absolute/relative 加上，输入{border: 1px red solid;height: 200px;?width: 200px;?left: 50px; position：relative； }，其效果图为：

这时候他就会先根据他一开始的定位发生移动，left的指令就生效了。

1.3 接下来，把left指令，换为margin-left，把position的指令删除，输入{border: 1px red solid;height: 200px;?width: 200px; margin-left: 50px; }，其效果图为：

这时候它就往右边移动了50px，也就是距离左边距50px。可以得出其指令并不需要position位，它直接规定边距的距离。

1.4 最后我们把position；left；margin-left都加上，输入{border: 1px red solid;height: 200px;?width: 200px;?left: 50px; position：relative；margin-left: 50px; }， 其效果图为：

这时候两个指令都生效了。首先margin-left:50px, 先让这个div距离左边距50px，然后position:relative;的指令使div定位在这个位置，最后left:50px；的指令，使div再距离所定位的位置50px，所以一共离左边距100px。

创建以下三个div：

1、在style分别输入

#father{border: 1px red solid;height: 200px;?width: 200px;?left: 100px; position:relative； }

#son{border: 1px black solid;height: 100px;?width: 100px; margin-left: 200px;? }

#grandson{border: 1px blue solid;height: 50px;?width: 50px; left:50px;?position:relative;?}

其效果图为：

这时候#son并没有position，但是#grandson的position为relative，所以他只能对当前的定位（由于他是father与son的子文件，所以会跟他们进行相关的位移后，再实施它自己的指令进行位移，所以一开始的定位应该在黑色框内的右上角）进行位移。

2、保持其他参数不变，然后把#grandson的position:relative 给为position:absolute，具体为：

#father{border: 1px red solid;height: 200px;?width: 200px;?left: 100px; position:relative； }

#son{border: 1px black solid;height: 100px;?width: 100px; margin-left: 200px;? }

#grandson{border: 1px blue solid;height: 50px;?width: 50px; left:50px;?position:absolute }

其效果图为：

此时，由于#grandson的position为absolute，即脱离文本源，就是他不会受没有定位的父div的影响，就是说其定位会忽略没有position定位的div，而直接找到最近一个有定位的祖div，再进行定位，所以它直接找到的是#father的定位，然后想对它定位后再进行left=50px的指令。

3. 要证明这一点很简单，我们再给#grandson生一个子div id="ggson"

这时候布局如图：

在style输入：

#father{border: 1px red solid;height: 200px;?width: 200px;?left: 100px; position:relative； }

#son{border: 1px black solid;height: 100px;?width: 100px; margin-left: 200px;? }

#grandson{border: 1px blue solid;height: 50px;?width: 50px; left:50px;?position:absolute }

#ggson{border: 1px green solid;height: 25px;?width: 25px; left:10px;?position:absolute}

其效果图为：

#ggs的定位追踪到#grandson上，所以在其定位上做出left=10px的指令。

这时候我们在吧#grandson的position给删掉，输入：

#father{border: 1px red solid;height: 200px;?width: 200px;?left: 100px; position:relative； }

#son{border: 1px black solid;height: 100px;?width: 100px; margin-left: 200px;? }

#grandson{border: 1px blue solid;height: 50px;?width: 50px; left:50px; }

#ggson{border: 1px green solid;height: 25px;?width: 25px; left:10px;?position:absolute}

这时的效果图为：

由于#son与#grandson上面都没有position的定位了，所以#ggson只能定位到father的position上面。

最后我们再把#ggson的position:absolute改为relative,输入：

#father{border: 1px red solid;height: 200px;?width: 200px;?left: 100px; position:relative； }

#son{border: 1px black solid;height: 100px;?width: 100px; margin-left: 200px;? }

#grandson{border: 1px blue solid;height: 50px;?width: 50px; left:50px; }

#ggson{border: 1px green solid;height: 25px;?width: 25px; left:10px;?position:relative;}

其效果图为：

这时候他就不会找祖div的position，其定位只接受其父div控制，只能定位在所在的位置。

CSS绝对定位与相对定位的区别？

就是背景定位而已，，加上我有一张背景图尺寸是50*50

然后我外框的div是200*200那么

那么这张会出现左上角如下图：

定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。

在这四种方案中，静态和相对定为不会影响整个文档布局，而绝对和固定定位则会脱离文档，因此页面不会为这两类定位元素预留空间。在预设状态下，所有元素均是静态的定位方式，也即这些元素按照原本的从上到下及从左到右的顺序进行排布。

只要为该元素设定了「position」属性，你就可以使用「top」、「right」、「bottom」和「left」这四个属性来精准定义其应该所在的地方。

在这个示例中，归属Element类别的元素将相对于其原来所在的位置分别向右和向下移动50个像素。若在此将「position」的值改为「absolute」或「fixed」，那么该元素将离最近的已定位的祖先元素的左边缘和上边缘分别距离50个像素。

我们一般使用「left」和「top」这两个属性就够了。如果想要避免元素在定位后，其尺寸会随着浏览器视窗的变化而变化出意想不到的结果，那么你应该先设定好该元素的大小，然后再定位其左上方的点。

相对定位是相对于正常排列的位置进行偏移，该元素原本所在的位置会被空出来，空出来的部分仍然会影响到后续元素的排列效果。

如上图所示，position:relative仅仅影响了元素本身，其原有位置被保留，但由于它向右上方进行偏移，因此遮住了第一部分文字的部分区域。

元素是相对于包含它的块来定义的，这个块是当前定位元素的父元素或祖先元素。在上例中，即为包含这三个段落的块。如果对样式表做一些修改，新增

然后将这三个段落放在ID为「Pos」的

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com