Why position: absolute + padding: 50px create a square box?

Question

div {
padding: 50px;
position: absolute
background-color: #32CD32;
}
Result = green box 50x50.
But if we remove position: absolute box will spread to all sheet width.
div {
padding: 50px;
background-color: #32CD32;
}
Result = green rectangle (page width)x50px
Does anyone know why?

For example position: fixed makes a box too, but postion: relative does not. Please explain.

Answer 1

Thats because the way the div element is handled. By default, it takes the whole width of its parent, making it spread to the whole page.
position:absolute makes it take a specified height and width, just like an inline element, which you have not defined, meaning that it just takes the padding, which creates a box.

Answer 2

ok