-1

I have a button inside a div. I want that button to appear in the bottom right corner. From other solutions I have learned that you should apply position: relative to the parent div and position: absolute; right: 0; bottom: 0 to the button. But why do I need position: relative for the parent div?

I have read the description of position: relative but it doesn't make sense to me. I can position an element relative to its normal position. But I do not want to change the position of the parent div, why do I need this?

mplungjan
  • 169,008
  • 28
  • 173
  • 236
user3182532
  • 1,097
  • 5
  • 22
  • 37
  • Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output. – mplungjan Jul 30 '18 at 15:11

1 Answers1

1

Absolutely positioned element are positioned relative to their nearest positioned ancestor.

So you specify position: relative on the div so that it's the container your absolutely positioned button get's moved with respect to. Otherwise it would be some other ancestor or the body of the page.

See https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block.

If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).

j08691
  • 204,283
  • 31
  • 260
  • 272