相对位置与绝对位置? ？

相对位置:

如果指定 position: relant，那么可以使用 top 或 bottom，以及 left 或 right 将元素相对于通常在文档中出现的位置移动。

职位绝对:

当您指定 position: Absol时，元素将从文档中移除，并放置在您要它放置的位置。

这里是一个很好的教程 http://www.barelyfitz.com/screencast/html-training/css/positioning/与样本使用的两个位置，各自的绝对和相对定位。

绝对 CSS 定位

position: absolute;

绝对定位是最容易理解的，你可以从 CSS position属性开始:

position: absolute;

这告诉浏览器，无论将要定位的是什么，都应该从正常的文档流中删除，并将其放置在页面上的确切位置。它不会影响它之前或之后的元素在 HTML 中是如何定位在 Web 页面上的，然而，除非您覆盖它，否则 威尔将受其父元素的定位的影响。

如果你想从文档窗口的顶部定位一个10像素的元素，你可以使用 top偏移到 position，使用 absolute定位:

position: absolute;
top: 10px;

这个元素将始终从页面顶部显示 10px，而不管内容是通过元素传递的，是在元素下面还是在元素上面(视觉上)。

这四个定位属性是:

1. top
2. right
3. bottom
4. left

要使用它们，您需要将它们视为偏移量属性。换句话说，位于 right: 2px的元素不会向右移动 2px。它的右侧被 2px从窗口的右侧(或者它重写父节点的位置)偏移。其他三个也是如此。

相对定位

position: relative;

相对定位使用与 absolute定位相同的四个定位属性。但是元素的位置不是基于浏览器视图端口，而是从元素在正常 流动中的位置开始。

例如，如果您的 Web 页面上有三个段落，而第三个段落上放置了 position: relative样式，那么它的位置将根据其当前位置进行偏移——而不是从视图端口的原始侧偏移。

第一段。

第二段。

备注:

• 绝对定位的元素的默认 width是其内容的宽度，不像相对定位的元素，其默认 width是它可以填充的空间的 100%。

• 您可以让元素与绝对定位的元素重叠，而不能使用相对定位的元素(本身就是指不使用负边距/定位)

抽签结果: 这种资源

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

这取决于你的需求和目标。“相对”位置是合适的，当你想取代一个元素的位置，否则会有在元素流中，例如，使一些字符出现在上标位置。“绝对”定位适用于将一个元素放置在由另一个元素设置的坐标系中，例如用一些文本“叠印”图像。

作为一个特殊的，使用“相对”定位没有位移(只是设置 position: relative) ，使一个元素的参考框架，这样你就可以使用“绝对”定位的元素内(在标记)。

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

我写了一个 博客文章，它给出了一个简单的例子，可以产生以下影响:

它的绿色 div 绝对位于父黄色 div 的底部。

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

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

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

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

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

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

然后，顶部:-35em，为内容，以前被推到一边。 然后添加边距-底部:-35em。 这样，内容是“下面”我的下拉菜单，但在视觉上它是并排与我的下拉菜单！ 下面到底部的空白区域，只有10米的边缘，就像在开始玩这个之前一样。 所以我的解决方案是这样的:

 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;

负面价值有时被低估，非常好的功能，当一个人更好地理解这些立场！

当然，固定的位置，对于我的页脚来说似乎也是合乎逻辑的，但是我真的希望页脚能够低于视窗，如果文本，或者内容，比视窗长。 如果页面上的内容很少，那么就留在底部。

这个设置非常好地修复了这个问题，并且记住使用“ em”而不是“ px”来实现更流畅/动态的页面布局! :)

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

相对: 相对于它的当前位置，但是可以移动。或者相对定位元素相对于其自身定位。

绝对: 绝对定位元件相对于其最接近的父元件定位。如果有一个存在，那么它就像固定的一样，相对于窗户。

<div style="position:relative"> <!--2nd parent div-->
<div>   <!--1st parent div-->
<div style="position:absolute;left:10px;....."> <!--Middle div-->
Md. Arif
</div>
</div>
</div>