Top of Element Relative to Bottom of Parent

Question

I have two divs: one on top of another (I'll call the top one topDiv and the bottom one bottomDiv), they each have a width of 100%. They are inside another div called parent. parent acts as a dummy/container, its main purpose is to aid in positioning of topDiv and bottomDiv. Each of these divs use absolute positioning. bottom has a fixed height, so I have the bottom css property of topDiv set to this height. However, I do not have a top css property for bottomDiv, as I assumed it would be directly under topDiv, but it isn't.

div {
    border: 1px solid black;
}
#parent {
  position: absolute;
  width: 100%;
  height: 5em;
  border-color: green;
}
#parent > div {
  position: absolute;
  width: 100%;
  bottom: 2em;
  padding: 0.1em;
}
#top {
  border-color: red;
  border-style: dashed;
}
#bottom {
  height: 2.25em;
  border-color: blue;
  border-style: dotted;
}

<div id="parent">
  <div id="top">This should be on top.</div>
  <div id="bottom">On the bottom is where I should be.</div>
</div>

All of the direction properties (top, right, bottom, left) are measured from the direction they name (e.g. top is measured from the top, so if something like 5em is specified, then the element is placed 5em away from the top of its container), but is there a way to reverse the effect? For instance, specifying an amount for right that would cause the element to be placed the specified amount away from the left of its container rather than its right.

Please clarify your **specific problem** or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Mar 04 '16 at 09:35
Does this answer your question? "[Why do absolute elements stack up on each other instead of stacking one after the other?](/q/20718577/90527)", "[Css Sibling Absolute Positioning](/q/10624771/90527)", "[Position bottom edge of element inside container](/q/11148836/90527)" — outis, Sep 08 '22 at 06:14

score 3 · Answer 1 · answered Mar 04 '16 at 09:55

Since the top property defines the distance from the parents top, then using top:100%, which means "the distance from parent's top is equal to parent's height", you set your elements top to it's parents bottom.

Now, if you want to get your element's top, for example, 5px from the parents bottom, you can use calc

.bottomDiv {
  top:calc(100% + 5px);
}

Top of Element Relative to Bottom of Parent

1 Answers1