CODEWITHSUNDEEP
htmlcssinlineabsolute
glitchedbits
glitchedbits

Reputation: 53

CSS: Inline Parent , Absolute Child - Unexpected Behavior

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.

Upvotes: 0

Views: 1008

Answers (1)

Ravimallya
Ravimallya

Reputation: 6610

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

Upvotes: 1

Related Questions