Position div atop its parent

Question

I want to position a child div above its parent as the following image shows:

The child has no fixed height.

Relevant code:

<footer id="parent">
    <div id="child" v-if="composing">
        <img src="/img/typing-indicator.gif" alt="typing" />
        <span>User is typing...</span>
    </div>
    <div id="input-container">
         .....
    </div>    
</footer>

`position: relative` on the parent element, `position: absolute` on the child element, and `top: -value`, where value is the arbitrary number you need to set it to. A better solution would be to structure the DOM in the way you need, rather than trying to fight against the document flow. Also, is the child element's height going to be dynamic? — UncaughtTypeError, Jul 28 '17 at 12:15
[Check out this question](https://stackoverflow.com/questions/7866804/position-children-div-above-parent-div?rq=1), and [perhaps this fiddle may help you](http://jsfiddle.net/5JZGg/76/) — JiFus, Jul 28 '17 at 12:15

score 2 · Accepted Answer · answered Jul 28 '17 at 12:30

Give position: relative to parent and position: absolute; & bottom: 100% to child

.parent {
  position: relative;
  background: pink;
  margin-top: 20px
}

.child {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: yellow;
}

<div>
  <footer class="parent">
    parent
    <div class="child" v-if="composing">
        child
    </div> 
  </footer>
</div>

score 1 · Answer 2 · answered Jul 28 '17 at 12:17

1

Use margin-top to negative of its height (for example 30px):

.child{
    margin-top:-30px;
}

answered Jul 28 '17 at 12:17

Ali Adlavaran

3,697
2
23
47

Victor Allegret · Answer 3 · 2017-07-28T12:41:42.813

1

You can use position: absolute on the child and position: relative on the parent , something like that should work:

.parent {
  position: relative;
  width: XXXX;
  height: XXXX; 
}

.child {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: XXXX;
  height: XXXX; 
}

You can also use transform property on the position absolute child:

.child {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  left: 0;
  width: XXXX;
  height: XXXX; 
}

edited Jul 28 '17 at 12:41

answered Jul 28 '17 at 12:18

Victor Allegret

2,344
3
18
31

This solution is almost good except `bottom: 100%` should be used instead of negative `top` value. `top: -100%;` means that children will be laid as many pixels above the paren as the parent height is - e.g. if parent height is `100px` then children's top edge would start `100px` above the parent. DEMO of `bottom: 100%`: https://jsfiddle.net/ds3kvz28/ DEMO of `top: -100%`: https://jsfiddle.net/ds3kvz28/1/ – norin89 Jul 28 '17 at 12:39

Position div atop its parent

3 Answers3