blocks|key|365031|text|“相对”和“绝对”定位都是相对的，只是框架不同而已。“绝对”定位是相对于另一个封闭元素的位置。“相对”定位是相对于没有定位的元素本身的位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365032|这取决于您的需求和目标，您使用哪一个。当您希望从元素流中的位置替换元素时，“相对”位置是合适的，例如，使某些字符出现在上标位置。“绝对”定位适合于将一个元素放置在由另一个元素设置的某个坐标系中，例如用一些文本“叠印”一个图像。|365033|作为特殊情况，使用不带位移的“相对”定位(只需设置position:+relative)来使元素成为参考框架，这样您就可以对其内部的元素(在标记中)使用“绝对”定位。|offset|length|style|CODE|365034|entityMap^0|0|0|P|I|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@$F|O|G|P|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

Both “relative” and “absolute” positioning are really relative, just with different framework. “Absolute” positioning is relative to the position of another, enclosing element. “Relative” positioning is relative to the position that the element itself would have without positioning.

It depends on your needs and goals which one you use. “Relative” position is suitable when you wish to displace an element from the position it would otherwise have in the flow of elements, e.g. to make some characters appear in a superscript position. “Absolute” positioning is suitable for placing an element in some system of coordinates set by another element, e.g. to “overprint” an image with some text.

As a special, use “relative” positioning with no displacement (just setting <code>position: relative</code>) to make an element a frame of reference, so that you can use “absolute” positioning for elements that are inside it (in markup).

blocks|key|580954|text|另一件需要注意的事情是，如果您希望将绝对元素限制为父元素，则需要将父元素的位置设置为相对。这将保持包含在父元素中的子元素，并且它不会与整个窗口“相对”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|580955|我写了一个blog+post，它给出了一个简单的例子，它产生了以下影响：|offset|length|580956|​|580957|📷|atomic|580958|580959|它有一个绿色的div，它绝对定位在父级黄色div的底部。|580960|1+http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/|580961|entityMap|0|LINK|mutability|MUTABLE|url|http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/d6b6b3a5523851fb6d594c804aa22771.png|imageAlt|2|3^0|0|5|9|0|0|0|0|1|1|0|0|0|0|1|2|2|2R|3|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|F|3|G|5|6|7|1A|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1B|8|@]|9|@$D|1C|E|1D|1|1E]]|A|$]]|$1|K|3|G|5|6|7|1F|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1G|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1H|8|@]|9|@$D|1I|E|1J|1|1K]|$D|1L|E|1M|1|1N]]|A|$]]|$1|P|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]|X|$5|Y|T|Z|A|$10|11|12|-4]]|13|$5|S|T|U|A|$V|W]]|14|$5|S|T|U|A|$V|W]]]]

Another thing to note is that if you want a absolute element to be confined to a parent element then you need to set the parent element's position to relative. That will keep the child element contained within the parent element and it won't be "relative" to the entire window. 

I wrote a <a href="http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/" rel="noreferrer">blog post</a> that gives a simple example that creates the following affect:

<img src="https://i.stack.imgur.com/9UGIB.png" alt="enter image description here">

That has a green div that is absolutely positioned to the bottom of the parent yellow div.

<a href="http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/" rel="noreferrer">1</a> <a href="http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/" rel="noreferrer">http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/</a>

blocks|key|365184|text|请回答，因为我的名声不足以评论。但不要把这看作是一个答案，只是一个额外的信息，就像我自己一样，在页脚和定位方面都有一些问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365185|在设置页面时，我的页脚始终位于底部，具有绝对位置，并且主容器/包装器具有相对位置。|365186|然后我发现我的文本内容和相同内容中的菜单(页眉和页脚之间的白色部分)存在一些问题，当将它们设置为绝对时，页脚不再停留。|365187|正如你所说，定位是一个复杂的主题。|365188|我的解决方案是，当我打开一个下拉菜单时，我想要的内容在网页的‘绝对’位置，而不是被推到一边，实际上是给它相对的位置，并把它放在我的下拉菜单下面的35em。(35em是我的下拉菜单的高度，当完全展开时)|365189|然后，Top:-35em，对于之前被推送到一边的内容。然后添加边距-底部：-35em。这样，内容就“在”我的下拉菜单下面，但在视觉上它与我的下拉菜单并排！下面的空白处直到页脚，只有10em的边距，就像它开始玩这个游戏之前一样。所以我的解决方案是这样的：|365190|+html,+body+{
++++margin:0;
++++padding:0;
++++height:100%25;

}
h1+{
++++margin:0;
}
++++#webpage+{
++++position:relative;
++++min-height:100%25;
++++margin:0;
++++overflow:auto;
}
+++++#header+{
++++height:5em;
++++width:100%25;
++++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%25;
++++padding-left:auto;
++++margin-left:auto;
++++margin-right:auto;
++++right:10em;
++++float:right;
++++top:-32em;
++++++}
#dropdown+{

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

}
++++#footer+{
++++position:absolute;
++++width:100%25;
++++right:0;
++++bottom:0;
++++height:5em;
++++margin:0;
+++++margin-top:5em;
}|code-block|syntax|javascript|365191|我看到你的问题得到了很好的回答，但在经历了许多麻烦之后，我发现这是一个非常好的解决方案，也是一种更好地理解定位工作原理的方法。当我把我的文本内容放在我的下拉菜单下面时，它不会把我的文本推到一边。如果我将文本更改为绝对位置，则页脚不会留在原处。因为我相信这是比我更多的人的问题，所以我在这里添加了这一点。实际上发生的是，我把文本，35ems，放在我的下拉框下面。|365192|然后，我视觉上把它放在彼此的旁边，相对位置，顶部：-35em；，并在下面的巨大空间中逐渐淡出，边距：-35em；|365193|负值有时会被低估，当一个人更好地理解这些位置时，非常好的功能！|365194|自然地，固定的位置似乎也是我的页脚的逻辑，但如果文本或内容比视口更长，我确实希望页脚位于视口的下方。如果页面上的内容很少，请留在页面底部。|365195|这个setupp很好地解决了这个问题，记住使用'em'，而不是'px‘，以获得更加流畅/动态的页面布局！:)|365196|(可能有更好的解决方案，但这对我来说是跨平台的，也适用于设备)。|365197|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1F|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1G|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

Putting an answer , as my reputation aint enough to comment. But dont look at this as an answer, just a additional info, as myself, had some problems with both footer, and positioning.

When setting up the page, so that my footer always stays at the bottom, with position absolute, and main container/wrapper with relative position.

I then found some issues with my text content, and a menu inside the same content(white part of page between header and footer), when setting these to absolute, footer no longer stays down.

Postitioning is, as you say a complex theme.

My solution, to the content I wanted in 'absolute' positon in my webpage, and not be pushed to the side, when in example opening a drop down menu, was to actually give it postition relative, and putting it 35em below my drop down menu.
(35em is the heigth of my dropdown menu, when fully extended)

Then, Top:-35em, for the content that before was pushed to the side.
And then adding margin-bottom:-35em.
This way, the content is "below" my drop down menu, but visually it is side by side with my drop down menu!
And the white space below down to the footer, is with only 10em margin, as it was before starting to play around with this.
So my solution to this was like this : 

<pre><code> 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;
}
</code></pre>

I see your question is answered good, but after alot of troubleing I found this to be a very good solution, and a way to understand better how positioning works..
When I place my text content, below my drop down menu, it doesn't push my text to the side.
If I changed the text to position absolute, the footer did not stay in place.
As I can believe this is an issue for more people then me, I add this here.
What in fact happends, is I put the text, 35ems, below my drop down.

Then, I visually put it right next to eachother, with relative position, and top:-35em;, and evening out the huge space below, with margin:-35em;

negative values are underestimated at times, very good functionality, when one understands these positions better! 

Natually, fixed position, also seemed logic for my footer, but I do really want the footer to go below the viewport, if the text, or content, is longer than the viewport.
And to stay at the bottom, if there is little content on the page.

This setupp fixed that very nicely, and remember to use 'em', not 'px' for a more fluid/dynamic page layout! :)

(there may be better solutions, but this works for me cross platforms, as well as devices).

blocks|key|365244|text|绝对将使您的元素离开您的流布局，并将其定位到最接近的相对父项(默认情况下，所有父项都是静态的)。这就是你在大多数情况下同时使用绝对和相对的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365245|您也可以单独使用relative，但这种情况非常少见。|365246|我已经制作了一段视频来解释这一点。|365247|https://www.youtube.com/watch?v=nGN5CohGVTI|offset|length|365248|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|17|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@$H|U|I|V|1|W]]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|G]]]]

Absolute will make your element out of your flow layout, and it will be positioned to the closest relative parent (all parents are static by default). That's how you use absolute and relative together most of the time.
You can also use relative alone, but that is very rare case.
I have made an video to explain this.
<a href="https://www.youtube.com/watch?v=nGN5CohGVTI" rel="nofollow noreferrer">https://www.youtube.com/watch?v=nGN5CohGVTI</a>

What is the difference between <code>position: relative</code> and <code>position: absolute</code> in CSS? And when should you use them?

Position Relative vs Absolute?

容器

在CSS中position: relative和position: absolute有什么不同？你应该在什么时候使用它们？

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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