Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 522
anand patil Avatar asked Jul 14 '15 05:07

anand patil


People also ask

What happens when an element is positioned absolutely?

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.

What does the position absolute do?

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.

What happens with position absolute in CSS?

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.

How does setting position absolute on an element affect document flow?

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.


1 Answers

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.

like image 134
Sandeep Tuniki Avatar answered Sep 21 '22 20:09

Sandeep Tuniki