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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

For the sake of completeness   The float property removes a element from the flow of the HTML too  e g   float  right

User · Answer

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

User · Answer

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

User · Answer

There s display  none  but I think that might be a bit more than what you re looking for

User · Answer

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

[css] How to remove an element from the flow?

Examples related to css