I know "position: absolute" will pop an element from the "flow of HTML/CSS" and it stops interacting with its neighbors. What other ways are there to achieve this?
我知道“position：absolute”将从“HTML / CSS流”中弹出一个元素，并停止与其邻居进行交互。还有什么方法可以实现这一目标？
8 个解决方案
#1
43
None?
没有？
I mean, other than removing it from the layout entirely with display: none, I'm pretty sure that's it.
我的意思是，除了完全用display：none从布局中删除它之外，我很确定就是这样。
Are you facing a particular situation in which position: absolute is not a viable solution?
您是否面临特定情况：绝对不是一个可行的解决方案？
#2
89
One trick that makes position:absolute more palatable to me is to make its parent position:relative. Then the child will be 'absolute' relative to the position of the parent.
一个让位置绝对的技巧：对我来说绝对更合适的是使其父级位置：相对。那么孩子将相对于父母的位置是“绝对的”。
的jsfiddle
#3
31
Another option is to set height: 0; overflow: visible; to an element, though it won't be really outside the flow and therefore may break margin collapsing.
另一种选择是设置高度：0;溢出：可见;对于一个元素，虽然它不会真正在流动之外，因此可能会破坏边缘崩溃。
#4
5
There's display: none, but I think that might be a bit more than what you're looking for.
显示：没有，但我认为这可能比你正在寻找的更多。
#5
3
Floating it will reorganise the flow but position: absolute is the only way to completely remove it from the flow of the document.
浮动它将重新组织流但位置：绝对是从文档流中完全删除它的唯一方法。
#6
3
position: fixed; will also "pop" an element out of the flow, as you say. :)
位置：固定;正如你所说，也将“弹出”流出的元素。 :)
position: absolute must be accompanied by a position. e.g. top: 1rem; left: 1rem
位置：绝对必须伴随一个位置。例如顶部：1rem;左：1rem
position: fixed 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.
position：fixed，但是，将元素放置在通常根据文档流程出现的位置，但在此之后阻止它移动。它还有效地将高度设置为0px（关于dom），以便下一个元素向上移动。
This can be pretty cool, because you can set position: fixed; z-index: 1 (or whatever z-index you need) so that it "pops" over the next element.
这可能很酷，因为你可以设置position：fixed; z-index：1（或者你需要的任何z-index），以便它“弹出”下一个元素。
This is especially useful for fixed position headers that stay at the top when you scroll, for example.
例如，这对于在滚动时保持在顶部的固定位置标题特别有用。
#7
1
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?
我知道这个问题已经有好几年了，但是我认为你要做的就是把它当成一个大元素，比如图像不会干扰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.
我刚刚碰到类似的东西，我想要一个图像溢出div，但我希望它在一串文本的末尾，所以我不知道它最终会在哪里。
A solution I figured out was to put the margin-bottom: -element's height, so if the image is 20px hight,
我想出的一个解决方案是将margin-bottom：-element的高度设置为，所以如果图像是20px hight，
margin-bottom: -20px; vertical-align: top;
margin-bottom：-20px; vertical-align：top;
for example.
例如。
That way it floated over the outside of the div, and stayed next to the last word in the string.
这样它就漂浮在div的外面，并且紧挨着字符串中的最后一个字。
#8
-2
Try to use this:
试着用这个：
position: relative;
clear: both;
I use it when I can't use absolute position, for example in printing when you use page-break-after: always; works fine only with position:relative.
当我不能使用绝对位置时，我使用它，例如在使用page-break-after时打印：always;仅适用于position：relative。
#1
43
None?
没有？
I mean, other than removing it from the layout entirely with display: none, I'm pretty sure that's it.
我的意思是，除了完全用display：none从布局中删除它之外，我很确定就是这样。
Are you facing a particular situation in which position: absolute is not a viable solution?
您是否面临特定情况：绝对不是一个可行的解决方案？
#2
89
One trick that makes position:absolute more palatable to me is to make its parent position:relative. Then the child will be 'absolute' relative to the position of the parent.
一个让位置绝对的技巧：对我来说绝对更合适的是使其父级位置：相对。那么孩子将相对于父母的位置是“绝对的”。
的jsfiddle
#3
31
Another option is to set height: 0; overflow: visible; to an element, though it won't be really outside the flow and therefore may break margin collapsing.
另一种选择是设置高度：0;溢出：可见;对于一个元素，虽然它不会真正在流动之外，因此可能会破坏边缘崩溃。
#4
5
There's display: none, but I think that might be a bit more than what you're looking for.
显示：没有，但我认为这可能比你正在寻找的更多。
#5
3
Floating it will reorganise the flow but position: absolute is the only way to completely remove it from the flow of the document.
浮动它将重新组织流但位置：绝对是从文档流中完全删除它的唯一方法。
#6
3
position: fixed; will also "pop" an element out of the flow, as you say. :)
位置：固定;正如你所说，也将“弹出”流出的元素。 :)
position: absolute must be accompanied by a position. e.g. top: 1rem; left: 1rem
位置：绝对必须伴随一个位置。例如顶部：1rem;左：1rem
position: fixed 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.
position：fixed，但是，将元素放置在通常根据文档流程出现的位置，但在此之后阻止它移动。它还有效地将高度设置为0px（关于dom），以便下一个元素向上移动。
This can be pretty cool, because you can set position: fixed; z-index: 1 (or whatever z-index you need) so that it "pops" over the next element.
这可能很酷，因为你可以设置position：fixed; z-index：1（或者你需要的任何z-index），以便它“弹出”下一个元素。
This is especially useful for fixed position headers that stay at the top when you scroll, for example.
例如，这对于在滚动时保持在顶部的固定位置标题特别有用。
#7
1
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?
我知道这个问题已经有好几年了，但是我认为你要做的就是把它当成一个大元素，比如图像不会干扰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.
我刚刚碰到类似的东西，我想要一个图像溢出div，但我希望它在一串文本的末尾，所以我不知道它最终会在哪里。
A solution I figured out was to put the margin-bottom: -element's height, so if the image is 20px hight,
我想出的一个解决方案是将margin-bottom：-element的高度设置为，所以如果图像是20px hight，
margin-bottom: -20px; vertical-align: top;
margin-bottom：-20px; vertical-align：top;
for example.
例如。
That way it floated over the outside of the div, and stayed next to the last word in the string.
这样它就漂浮在div的外面，并且紧挨着字符串中的最后一个字。
#8
-2
Try to use this:
试着用这个：
position: relative;
clear: both;
I use it when I can't use absolute position, for example in printing when you use page-break-after: always; works fine only with position:relative.
当我不能使用绝对位置时，我使用它，例如在使用page-break-after时打印：always;仅适用于position：relative。