Css: Display:Inline-Block and Positioning:Absolute

CSS: display:inline-block and positioning:absolute

When you use position:absolute;, the element is taken out of the normal page flow. Therefore it no longer affects the layout of its container element. So the container element does not take into account its height, so if there's nothing else to set the height, then the container will be zero height.

Additionally, setting display:inline-block; does not make any sense for an element that is position:absolute;. Again, this is because absolute positioning takes the element out of the page flow. This is at odds with inline-block, which only exists to affect how the element fits into the page flow. All elements that are position:absolute; are automatically treated as display:block, since that's the only logical display mode for absolute positioning.

If you need absolute positioning, then the only solution to your height problem is to set the height of the container box.

However, I suspect that you could do without the absolute positioning.

It looks like what you're trying to do is position the second <span> in each block to a fixed position in the block, so that they line up.

This is a classic CSS problem. In the "bad-old-days", web designers would have done it using a table, with fixed widths on the table cells. This obviously isn't the answer for today's web designers, but it is something that causes a lot of questions.

There are a number of ways to do it using CSS.

The easiest is to set both the <span> elements to display:inline-block;, and give them both a fixed width.

eg:

<div class='section'>
    <span class="element-left">some text</span>
    <span class="element-right">some text</span>
</div>

with the following CSS:

.section span  {display:inline-block;}
.element-left  {width:200px;}
.element-right {width:150px;}

[EDIT]after question has been updated

Here's how I would achieve what you're asking now:

<div class='section'>
    <span class="element-left"><span class='indent-0'>some text</span></span>
    <span class="element-right">some text</span>
</div>
<div class='section'>
    <span class="element-left"><span class='indent-1'>some text</span></span>
    <span class="element-right">some text</span>
</div>
<div class='section'>
    <span class="element-left"><span class='indent-2'>some text</span></span>
    <span class="element-right">some text</span>
</div>

with the following CSS:

.section span  {display:inline-block;}
.element-left  {width:200px;}
.indent-1 {padding:10px;}
.indent-2 {padding:20px;}
.element-right {width:150px;}

A small amount of extra markup, but it does achieve the effect you want.

Position absolute related to an inline element

Use display: inline-block; on .node (inline elements can't have position: relative, inline-blocks can)

.node {    position: relative;    display: inline-block;}
.tip {    position: absolute;    top: -12px;    font-size: 9px;    line-height: 12px;    color: #c83025;    left:0;    right:0;    text-align: center;}

aaaaaaa<div class="node">  foo  <div class="tip">bar</div></div>

Whether 'position:absolute' is always 'display:block'

There's a couple of things here. First, no, not all absolute positioned elements are treated as display:block. Their display value is blockified which means that they are converted to block-level display values. For example:

display:inline-flex => display:flex
display:inline-grid => display:grid
display:inline-table => display:table
display:inline list-item => display:list-item (Firefox supports inline list-item)

display:none and display:contents aren't changed.

display:inline, display:inline-block, and internal table object boxes => 
display:block

Elements that are already block level are unaffected. Flex is still flex, grid is 
still grid, etc.

However, that doesn't explain why you get different results for your two cases, since in each case the absolute positioned items do indeed have a computed display value of block. For this, we need to address our expectations of what it means for an element to be display:block. We expect it to start a new line and have its left to right margin edges fill the width of the containing block.

In fact, that only applies to block level elements in normal flow. Absolute positioned elements are not in normal flow, and so those rules don't apply. They have their own set of rules, part of which say that if their top, left, bottom, right values are auto (which they are in your examples), the box is positioned according to where its position would have been if it hadn't been absolutely positioned. And if it hadn't been absolutely positioned, the display:block and display:inline-block difference would have had an effect, in your first case starting a new line, in your second case remaining on the same line.

Combining display: inline-block with position: absolute : what should happen?

The right behavior here is not actually defined in the spec. The vertical position should be "as if the position were not absolute, sort of", basically. More precisely, this part of http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height is relevant:

But rather than actually calculating the dimensions of that
hypothetical box, user agents are free to make a guess at its probable
position.

That said, the Gecko code implementing this predates Gecko's implementation of inline-block, so only checks for original display being "inline". I filed https://bugzilla.mozilla.org/show_bug.cgi?id=674435 to look into changing this in Gecko.

Why do 2 elements with display: inline-block; position: absolute; overlap over each other instead of being right next to each other?

Elements with position absolute are not in a normal flow. Document flow is the arrangement of page elements, as defined by CSS positioning statements, and the order of HTML elements. this is to say, how each Definition takes up space and how other elements position themselves accordingly. Take a look: https://soulandwolf.com.au/blog/what-is-document-flow/#:~:text=by%20John%20Rosato,other%20elements%20position%20themselves%20accordingly. and this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow

What is the behaviour of using position and display together in CSS?

Elements that are position: absolute behave the same as elements with display: block, so your display has no effect. Here's a good explanation: CSS: display:inline-block and positioning:absolute

Setting width: 100% should fix your problem.

Css: Display:Inline-Block and Positioning:Absolute