How to remove an element from the flow?
CssCss Problem Overview
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?
Css Solutions
Solution 1 - Css
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][1]
[1]: http://jsfiddle.net/mC7QM/ "Example"
Solution 2 - Css
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?
Solution 3 - Css
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.
Solution 4 - Css
There's display: none, but I think that might be a bit more than what you're looking for.
Solution 5 - Css
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
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.
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.
This is especially useful for fixed position headers that stay at the top when you scroll, for example.
Solution 6 - Css
For the sake of completeness:
The float property removes a element from the flow of the HTML too, e.g.
float: right
Solution 7 - Css
Floating it will reorganise the flow but position: absolute is the only way to completely remove it from the flow of the document.
Solution 8 - Css
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.
Solution 9 - Css
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.