blocks|key|1229274|text|一个也没有？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1229275|我的意思是，除了使用display:+none将其从布局中完全删除之外，我非常确定就是这样。|offset|length|style|CODE|1229276|您是否面临着position:+absolute不是可行解决方案的特殊情况？|1229277|entityMap^0|0|A|D|0|6|I|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

None?

I mean, other than removing it from the layout entirely with <code>display: none</code>, I'm pretty sure that's it.

Are you facing a particular situation in which <code>position: absolute</code> is not a viable solution?

blocks|key|1014782|text|让我更喜欢position:absolute的一个诀窍是让它成为父position:relative。那么该子对象相对于父对象的位置将是“绝对的”。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1014783|jsFiddle|1014784|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/mC7QM/^0|5|H|X|H|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

One trick that makes <code>position:absolute</code> more palatable to me is to make its parent <code>position:relative</code>. Then the child will be 'absolute' relative to the position of the parent.

<a href="http://jsfiddle.net/mC7QM/" rel="noreferrer" title="Example">jsFiddle</a>

blocks|key|1014866|text|另一种选择是将height:+0;+overflow:+visible;设置为一个元素，尽管它不会真正位于流之外，因此可能会破坏margin+collapsing。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1014867|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing^0|7|T|1S|H|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Another option is to set <code>height: 0; overflow: visible;</code> to an element, though it won't be really outside the flow and therefore may break <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing">margin collapsing</a>.

blocks|key|1229245|text|有display:+none，但我认为这可能比你想要的要多一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1229246|entityMap^0|1|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

There's <code>display: none</code>, but I think that might be a bit more than what you're looking for.

blocks|key|1229565|text|正如您所说，position:+fixed;还将从流中“弹出”一个元素。:)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1229566|position:+absolute必须附带一个位置。例如top:+1rem;+left:+1rem|1229567|但是，position:+fixed将根据文档流将元素放在它通常会出现的位置，但会阻止它在此之后移动。它还有效地将高度设置为0px+(与dom相关)，以便下一个元素在其上移动。|1229568|这可能非常酷，因为您可以设置position:+fixed;+z-index:+1+(或您需要的任何z索引)，以便它在下一个元素上“弹出”。|1229569|例如，这对于滚动时停留在顶部的固定位置标题特别有用。|1229570|entityMap^0|6|G|0|0|I|T|L|0|3|F|0|E|R|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|13|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|O|$]]

<code>position: fixed;</code> will also "pop" an element out of the flow, as you say. :)

<code>position: absolute</code> must be accompanied by a position. e.g. <code>top: 1rem; left: 1rem</code>

<code>position: fixed</code> however, will place the element where it would normally appear according to the document flow, but prevent it from moving after that. It also effectively set's the height to 0px (with regards to the dom) so that the next element shifts up over it.

This can be pretty cool, because you can set <code>position: fixed; z-index: 1</code> (or whatever z-index you need) so that it "pops" over the next element.

This is especially useful for fixed position headers that stay at the top when you scroll, for example.

blocks|key|1229309|text|浮动它会重新组织流程，但只有位置:绝对才能将其从文档流中完全移除。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1229310|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Floating it will reorganise the flow but position: absolute is the only way to completely remove it from the flow of the document.

blocks|key|1014913|text|我知道这个问题已经有好几年了，但我认为你想要做的是，让一个大的元素，比如图像，不会影响到div的高度？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014914|我刚刚遇到了类似的情况，我希望图像溢出div，但我希望它位于文本字符串的末尾，所以我不知道它会在哪里结束。|1014915|我想出的一个解决方案是把边距-底部：-元素的高度，所以如果图像是20px高，|1014916|margin-bottom:+-20px;++vertical-align:+top;|offset|length|style|CODE|1014917|例如。|1014918|这样，它就漂浮在div的外部，并停留在字符串中最后一个单词的旁边。|1014919|entityMap^0|0|0|0|0|17|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@$H|V|I|W|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|X|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

I know this question is several years old, but what I think you're trying to do is get it so where a large element, like an image doesn't interfere with the height of a div?

I just ran into something similar, where I wanted an image to overflow a div, but I wanted it to be at the end of a string of text, so I didn't know where it would end up being.

A solution I figured out was to put the margin-bottom: -element's height, so if the image is 20px hight, 

<code>margin-bottom: -20px;
 vertical-align: top;</code> 

for example.

That way it floated over the outside of the div, and stayed next to the last word in the string.

blocks|key|1229595|text|出于完整性的考虑：float属性也从HTML流中删除了一个元素，例如|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1229596|float:+right|code-block|syntax|javascript|1229597|entityMap^0|9|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

For the sake of completeness: 
The <code>float</code> property removes a element from the flow of the HTML too, e.g.

<pre class="lang-css prettyprint-override"><code>float: right
</code></pre>

blocks|key|1014821|text|尝试使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014822|position:+relative;
clear:+both;|code-block|syntax|javascript|1014823|当我不能使用绝对位置时，我会使用它，例如，当你使用page-break-after:+always;打印时，它只适用于position:relative。|offset|length|style|CODE|1014824|entityMap^0|0|0|P|P|1N|H|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

Try to use this:

<pre><code>position: relative;
clear: both;
</code></pre>

I use it when I can't use absolute position, for example in printing when you use <code>page-break-after: always;</code> works fine only with <code>position:relative</code>.

I know <code>position: absolute</code> will pop an element from the flow and it stops interacting with its neighbors.

What other ways are there to achieve this?

How to remove an element from the flow?

我知道position: absolute将从流中弹出一个元素，并停止与其邻居的交互。还有什么其他方法可以实现这一点呢？

问如何从流中删除元素？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从流中删除元素？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从流中删除元素？
EN