#x {
background: red;
height: 100px;
}
#y {
background: blue;
height: 100px;
position: absolute;
}
<div id="x">div 1</div>
<div id="y">div 2</div>
position: absolute;
On the div is making it behave like an inline element. Remove the property and we see that the div behaves like it should, a block element.
My question - Does just adding a position: absolute to a block element make it behave like an inline?
Absolutely positioned elements are removed entirely from the document flow. That means they have no effect at all on their parent element or on the elements that occur after them in the source code. An absolutely positioned element will therefore overlap other content unless you take action to prevent it.
Position absolute takes the document out of the document flow. This means that it no longer takes up any space like what static and relative does. When position absolute is used on an element, it is positioned absolutely with reference to the closest parent that has a position relative value.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Absolute positioning Giving an item position: absolute or position: fixed removes it from flow, and any space that it would have taken up is removed.
Here is an excerpt from the Mozila Developer Network page:
Most of the time, absolutely positioned elements have auto values of height and width computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than auto) both top and bottom and leaving height unspecified (that is, auto). Likewise for left, right, and width.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Notes
So, as others have specified, it does not make it an inline element. It just adjusts it's height and width to take up only as much space as it requires.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With