How to remove an element from the flow?

Question

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

What other ways are there to achieve this?

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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,

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.

Answer 5

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.

Answer 6

None?

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

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