CSS: Inline Parent , Absolute Child - Unexpected Behavior

Question

Sorry if this question has been answered already, I've searched and was unable to find an answer.

I'm having an issue keeping an absolutely positioned element inside of it's parent element.

For example, the following works without the parent having a display: inline;

<div class="container">
  <div class="bottom">...</div>
  <div class="top">...</div>
</div>
<div class="container">
  ...
</div>

and

.container {
  position: relative; 
}
.bottom {
  position: relative;
  z-index: 998;
}
.top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

Obviously, the container elements will be displayed on top of each other vertically whereas the intent is to have them side by side. Adding display:inline; to the #container element "fixes" this by displaying the container elements side by side.

However, when display:inline; is added to the parent, it causes the .top element that has position:absolute; to lose it's alignment and to appear below the intended location. I feel that I'm doing something wrong that is fairly simple, but I'm stumped. Any help or direction is extremely appreciated.

Try to use [`inline-block`](http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block) instead of `inline`. — Ravimallya, Aug 14 '14 at 06:11
Wow, thanks! I feel silly, I know I tried `inline-block` but must have had an error elsewhere. Whatever the case, it works now. — glitchedbits, Aug 14 '14 at 06:31

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Answering the question, because it may helpful to someone who has the exact problem.

You will have to use display:inline-block; css attribute to the .container div.

Elements with display:inline-block elements are like display:inline elements, but they can have a width and height.

Extracted from W3Schools: inline-block displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

CSS: Inline Parent , Absolute Child - Unexpected Behavior

1 Answers1