div中position:relative的完整用法怎么用？

position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static）

如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。

absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对定位，那么#sub的绝对定位就是相对于body来定位的。

relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

static: 默认值。无特殊定位，对象遵循HTML定位规则;

absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义;

fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范;

relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置;

谁能帮我解释一下在html里position: relative;是什么意思？

position: relative; 相对定位。

相对于其父级元素来定位。

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute 绝对定位 ，通过 top,left 样式来绝定元素位置。

position: relative;,单独这个有什么用

position：absolute这个是绝对定位；是相对于浏览器的定位。比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。比如：div class="1"/divdiv class="2"/div当1固定了位置。1的样式float:left;width:100px; height:800px;2的样式为float:left; position：relative；margin-left:20px;width:50px;2的位置在1的右边，距离120px

在CSS中position: relative是什么意思

css中position: relative的意思是：

相对定位，对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。

位置属性被设置为relative之后，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。它可以随窗口大小变化。但大小仍然不会变。要是你设置成width:100%;height:100%;这样就会随着窗口变大变小。

比如：div class="1"/divdiv class="2"/div

当1固定了位置。1的样式 float:left;width:100px; height:800px;

2的样式为 float:left; position：relative；margin-left:20px;width:50px;

2的位置在1的右边，距离120px.

当Position属性值为Relative时对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时，只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时，只有left起作用。

希望以上的回答能够帮到你！

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：

div id="father"

        div id="son"

            div id="grandson"/div

        /div

    /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中position: relative是什么意思？

在CSS中，“position: relative”是设置定位类型为相对定位，它可以配合“top”、“bottom”、“left”、“right”这4个偏移量来实现相对它所属父元素的相对定位。

position属性规定元素的定位类型，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

relative属性相对比较简单，它是相对它所属父元素来进行偏移的，可以通过“top”、“bottom”、“left”、“right”4个偏移属性进行定位。

扩展资料：

position属性的其它定位类型：

1、absolute

绝对定位，依据父元素中最近设置为relative定位类型的元素进行偏移。

2. fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

3. static

position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

参考资料来源：百度百科-position （定位元素）