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?
This question is related to
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.
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.
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.
Floating it will reorganise the flow but position: absolute is the only way to completely remove it from the flow of the document.
There's display: none, but I think that might be a bit more than what you're looking for.
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.
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.
For the sake of completeness:
The float property removes a element from the flow of the HTML too, e.g.
float: right
Source: Stackoverflow.com