Does adding a position: absolute to a block element make it behave like an inline? [closed]

Question

#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?

Estancia

what are you asking ? this is position – Agglutinate

What is your question? If you want it to be full width just add width:100% to your css – Benevento

@anandpatil is not inline is position -->developer.mozilla.org/en-US/docs/Web/CSS/position – Agglutinate

Duplicate of - absolute-position-affects-width – Legendary

Answer 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%.

Gwalior

Setting position:relative to parent is not necessary after all, setting width: 100% for the absolute element is enough, pls confirm! – Estancia

Answer 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.

Santana

This is the correct way to make an absolutely positioned element behave like a block element: set top: 0; left: 0; right: 0;. – Waal

Answer 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;
}

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

<span>Testing span</span>

Legendary

Answer 4

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;

Oculomotor

It depends on what you are going to achieve. First, we should differentiate each other what position:absolute means. It means that it would be positioned absolutely in relative of the parent element. – Oculomotor

Answer 5

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;

Sheol