静态元素和左侧和顶部的相对元素之间是否存在差异？

Question

具有position: relative;的块元素通常用作绝对定位元素的包含元素。当我没有这样的块元素时，我通常会将静态元素更改为相对元素。除了能够充当的元素之外，这是否会改变其他任何内容 绝对定位元素的容器？

块之间是否存在差异？

position: static;

和

position: relative;
left: 0;
top: 0;

除了上面提到的那个？

Answer 1

1. Relative元素可以使用z-index而static可以使用

2. Top，right，bottom，left对static定位元素无效。

3. IE7需要relative元素位置才能使用overflow。过去的堆栈溢出question regarding this issue。另外，从Jonathan Snook about it发帖。

Answer 2

我能想到的一个区别是

position:relative元素将尊重z-index属性。

Demo

修改

如前所述，偏移属性top,left,bottom,right仅适用于定位元素（而非静态元素）

这是在相对定位的元素中使用此偏移量的一个（非直观）应用程序 - 在决定在元素上设置position:relative时也会影响您。

注意：如果问题中提到偏移量为0（即top:0;left:0），则不会表示这种情况，但在使用position:relative时这是很重要的事情。

来自the spec：

  

以这种方式偏移框（B1）对框（B2）没有影响   如下：B2被给予一个位置，好像B1没有偏移而B2不是   在应用B1的偏移后重新定位。这意味着相对   定位可能会导致框重叠。

请看一下 demo

您可以看到，当我在静态元素上放置边距时 - 它影响了以下p元素，但是当我在相对元素上使用定位时，以下p元素保持不变。

Answer 3

你可以省略

left: 0;
top: 0;

因为它们是position:relative的默认值而且没有，除非您不需要将其更改为relative，否则没有真正的差异，如果您不需要使用top，left或z-index值，如果您不需要在其中包含绝对定位的div

还要记住相对定位的元素占据文档流程中的static位置

Answer 4

具有除“auto”之外的计算z-indices的定位元素生成堆叠上下文（w3 spec）。堆叠上下文行为的临床定义较少available on MDN。

元素本身出现在不同的painting order中（与其他人比较＃3）。

Answer 5

位置差异：（Demo）

position : static不接受左派＆amp;最佳。静态用于覆盖某些场景的相对位置或绝对位置。正如你在图片中看到的那样。

position : relative接受左和右顶部但相对于其正常位置。如果没有前面的元素而不是它的格式父元素，你可以在图片中看到。

position : absolute接受左和右顶部但相对于父（如果位置：相对定义为父元素），如图所示。

所以 问题：＆＃34;块与相对和＆之间是否存在差异？ ？静态＆＃34; 答：是的：）

＆安培;

带

的块之间是否有区别？

position: static;

和

position: relative;
left: 0;
top: 0;

答案：否

Answer 6

Static和Relative定位之间存在两个非常大的差异。其中大部分是通过组件名称最容易识别的。正如您想象的那样，Static定位组件将是静态的！您将无法控制使用Static，top，left，bottom和右侧的组件的位置，而是通过放置来定位在最后一个组成部分。

另一方面，相对是一个更好的解决方案，而且它更有用。与Static定位不同，您可以使用top，left，right和bottom，但它仍然位于最后一个组件的下方。

此外，您无法控制Z-Index定位组件的Static。但是，Relative定位组件不是这种情况。在Z-Index定位组件上使用Static根本不会产生任何影响，只会将组件放在之前调用的组件下面。

Static定位很像Relative定位，没有全部控制。如果您只想放置几个组件，一个接一个，而不用担心它们将如何定位。像这样：http://jsfiddle.net/u62GV/然后使用Static。但是如果您希望将多个组件一个接一个地放置，并具有定位组件的能力（类似于绝对），我建议Relative，如以下示例所示：http://jsfiddle.net/AhLF5/

也许这些链接可以帮助您：

Difference between static and relative positioning

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

http://www.codecademy.com/forum_questions/513b0a64ee849413590009f9

Answer 7

<强> 1。静态

position: static;

<强> 2。相对

position: relative;

第3。绝对

position: absolute;

区别在于：

1 - 该位置基于浏览器视口，这意味着如果向任何方向无限滚动都无关紧要，因为基本值仍然是视口。

2 - 该位置基于父视口，因此如果您滚动到任何方向，可能该元素将消失（除非父项是静态的：D）

3 - 该位置基于最近定位的父视口，任何定义了位置（静态/相对/绝对）的元素。

我希望这不会让你更加困惑。

LMAO