问相对位置还是绝对位置？

EN

“相对”和“绝对”定位都是相对的，只是框架不同而已。“绝对”定位是相对于另一个封闭元素的位置。“相对”定位是相对于没有定位的元素本身的位置。

这取决于您的需求和目标，您使用哪一个。当您希望从元素流中的位置替换元素时，“相对”位置是合适的，例如，使某些字符出现在上标位置。“绝对”定位适合于将一个元素放置在由另一个元素设置的某个坐标系中，例如用一些文本“叠印”一个图像。

作为特殊情况，使用不带位移的“相对”定位(只需设置position: relative)来使元素成为参考框架，这样您就可以对其内部的元素(在标记中)使用“绝对”定位。

另一件需要注意的事情是，如果您希望将绝对元素限制为父元素，则需要将父元素的位置设置为相对。这将保持包含在父元素中的子元素，并且它不会与整个窗口“相对”。

我写了一个blog post，它给出了一个简单的例子，它产生了以下影响：

​

​

它有一个绿色的div，它绝对定位在父级黄色div的底部。

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

请回答，因为我的名声不足以评论。但不要把这看作是一个答案，只是一个额外的信息，就像我自己一样，在页脚和定位方面都有一些问题。

在设置页面时，我的页脚始终位于底部，具有绝对位置，并且主容器/包装器具有相对位置。

然后我发现我的文本内容和相同内容中的菜单(页眉和页脚之间的白色部分)存在一些问题，当将它们设置为绝对时，页脚不再停留。

正如你所说，定位是一个复杂的主题。

我的解决方案是，当我打开一个下拉菜单时，我想要的内容在网页的‘绝对’位置，而不是被推到一边，实际上是给它相对的位置，并把它放在我的下拉菜单下面的35em。(35em是我的下拉菜单的高度，当完全展开时)

然后，Top:-35em，对于之前被推送到一边的内容。然后添加边距-底部：-35em。这样，内容就“在”我的下拉菜单下面，但在视觉上它与我的下拉菜单并排！下面的空白处直到页脚，只有10em的边距，就像它开始玩这个游戏之前一样。所以我的解决方案是这样的：

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

我看到你的问题得到了很好的回答，但在经历了许多麻烦之后，我发现这是一个非常好的解决方案，也是一种更好地理解定位工作原理的方法。当我把我的文本内容放在我的下拉菜单下面时，它不会把我的文本推到一边。如果我将文本更改为绝对位置，则页脚不会留在原处。因为我相信这是比我更多的人的问题，所以我在这里添加了这一点。实际上发生的是，我把文本，35ems，放在我的下拉框下面。

然后，我视觉上把它放在彼此的旁边，相对位置，顶部：-35em；，并在下面的巨大空间中逐渐淡出，边距：-35em；

负值有时会被低估，当一个人更好地理解这些位置时，非常好的功能！

自然地，固定的位置似乎也是我的页脚的逻辑，但如果文本或内容比视口更长，我确实希望页脚位于视口的下方。如果页面上的内容很少，请留在页面底部。

这个setupp很好地解决了这个问题，记住使用'em'，而不是'px‘，以获得更加流畅/动态的页面布局！:)

(可能有更好的解决方案，但这对我来说是跨平台的，也适用于设备)。