Does Adding A Position: Absolute To A Block Element Make It Behave Like An Inline?

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

Solution 1:

Yes, the block element feature of having the full width of the parent's content area will not be honored when an element is absolutely positioned.

If you want to retain the width (100% of the container) of a block element, then add postion: relative; to the parent of the absolute element, then set the width of the absolute element to 100%.

Solution 2:

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.

Solution 3:

That does not mean it is like inline element.

absolute and fixed positioned elements loses the dimension. We need to give width, height.

Actually an inline element with position:absolute behaves like a block element.

https://jsfiddle.net/6nyh5p40/1/ - See how the span gets the height.

#x {
background: red;
height: 100px;
position: absolute;
}
span {
background: green;
height: 100px;
position: absolute;
}

<divid = "x">div 1</div>abcd

<span>Testing span</span>

Solution 4:

No Position absolute is basically to adjust the position of particular area Because position absolute remove that element from its current div.

To display in inline we usually use

display:inline-block;

OR

float:left;

Solution 5:

I did not get your question. If you want it to behave like an inline element then you should use

display:inline-block;

First, we should differentiate each other what position:absolute means. It means that it would be positioned absolutely in relative of the parent element. On the other hand, display:block; functions the same as <p> tag. It will occupy the entire line. Do not use position:absolute to line up the elements. You can use either display:inline-block or you can use float:left;