102

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?

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Devoted
  • 177,705
  • 43
  • 90
  • 110

9 Answers9

132

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

Joe Flynn
  • 6,908
  • 6
  • 31
  • 44
  • In some cases adding `position:absolute` to the parent causes zIndex to fail (ignored), meaning that the detached element can be still painted over by some in-the-flow elements. Removing `position:absolute` from the parent has help me to solve this. – DDRRSS Dec 31 '21 at 18:45
63

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?

Matchu
  • 83,922
  • 18
  • 153
  • 160
  • 4
    `position: absolute` causes repainting on scrolling, which is bad for performance on mobile – bafromca Dec 20 '14 at 01:02
  • 16
    This is not the answer a user expects to get when coming here as title reads "remove from the flow". `display: none` completely removes the element not only from the flow. – jstice4all Oct 19 '16 at 10:11
44

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.

user
  • 23,260
  • 9
  • 113
  • 101
  • 2
    @Jessica, use `::before` pseudo element with absolute positioning to emulate the background. – user Dec 25 '16 at 07:10
  • With this approach the element will also take a [grid](https://css-tricks.com/snippets/css/complete-guide-grid/) cell if it is in a grid parent, which is inconvenient. – ANeves Mar 31 '21 at 16:40
5

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

Greg Hewgill
  • 951,095
  • 183
  • 1,149
  • 1,285
  • 2
    But even then, it's still "in the neighborhood".. absolute position relative to the body is the only way to have full control over it's position. Keep in mind if it's parent is declared as relative then it's absolute origin is relative to that - you'd have to append the element to document.body or non-relatative declared element in that case. – Dan Heberden Jun 07 '10 at 23:45
  • 4
    What? Position is not relevant if the element isn't even *displayed*. – Greg Hewgill Jun 08 '10 at 02:27
  • In Firefox, validation messages for inputs with `display: none` appear in a nonsensical location (at the top of the screen, covering up the tabs). It seems undisplayed elements are truly positionless, at least in that browser. – Brilliand Feb 26 '13 at 19:41
5

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.

Brian Lewis
  • 321
  • 3
  • 4
  • position: fixed z-index: 1 brings it out of flow but the element stays in fixed position. It does not scroll. I want an element to bring out of the flow and also scroll. – Pran Kumar Sarkar Mar 19 '23 at 15:17
4

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

float: right
air5
  • 140
  • 2
  • 10
3

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

Sam Bowler
  • 103
  • 1
  • 1
  • 5
2

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.

Jeremy Miller
  • 373
  • 6
  • 21
-1

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.

Tom van der Woerdt
  • 29,532
  • 7
  • 72
  • 105
Massimo
  • 41