14

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

M -
  • 26,908
  • 11
  • 49
  • 81
anand patil
  • 507
  • 1
  • 9
  • 26

5 Answers5

6

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

KiiroSora09
  • 2,247
  • 18
  • 21
  • Setting position:relative to parent is not necessary after all, setting width: 100% for the absolute element is enough, pls confirm! – anand patil Jul 14 '15 at 06:28
4

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.

Sandeep Tuniki
  • 403
  • 5
  • 12
  • 1
    This is the correct way to make an absolutely positioned element behave like a block element: set `top: 0; left: 0; right: 0;`. – Isaac Lyman Feb 22 '16 at 17:52
1

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>
Felix A J
  • 6,300
  • 2
  • 27
  • 46
0

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;

Emperor Krauser
  • 218
  • 2
  • 8
  • 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. – Emperor Krauser Jul 14 '15 at 07:16
0

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;
Pooja Bhagat
  • 91
  • 4