Position children div above parent div

Question

<div id="1">
 <div id="2">
 </div>
</div>

I cant position div2 above div1 (not in the z-index but in vertical dimension). Negative position: top not working, seems like top border of parent div is limit for childrens.

      |-------|
      | div2  |
------|       |
|     |_______|
|          |
|   div1   |
|__________|

Did you try possition:absolute/fixed depends on what are you trying to achieve ? — eugeneK, Oct 23 '11 at 15:04
div2 must be positioned relatively to div1. Because there will be several divs with this styles. — rendom, Oct 23 '11 at 15:57
You should show also the css associated with divs. As example, if parent div has `overflow:hidden`, than part of child div which is outside of parent will be hidden. Also if I'm correct id and classname should not start with digits. — Sergiy T., Sep 27 '19 at 09:11

score 1 · Answer 1 · edited May 23 '17 at 12:03

1

Class names starting with digits are not valid, although it may work in some browsers. Use div1 or div2 and that should work. Take a look at this answer for a good explanation of valid CSS class names.

Update after comments:

Ok, well, without seeing the offending code, it's hard to see where the problem is. But using this css you can reproduce your diagram:

#div2 {
    position:relative;
    top:-30px;
    left:100px;
}

As I think you already know.. but maybe you forgot the position:relative? Anyway, see it working in this fiddle.

edited May 23 '17 at 12:03

Community

1
1

answered Oct 23 '11 at 14:50

uɥƃnɐʌuop

14,022
5
58
61

I guess it was for example only. – eugeneK Oct 23 '11 at 15:05
If that's the case then we can't solve problems we can't see. Rendom, maybe you could post the html & css you are using? – uɥƃnɐʌuop Oct 23 '11 at 15:19
digit names was just for example. It can be any other. See example above and use any names for divs you like. – rendom Oct 23 '11 at 15:39

score 0 · Answer 2 · answered Sep 27 '19 at 08:57

Remember that the position: relative attribute allows the children within that element to be place relative to that element. It essentially defines a new point by which elements can be placed, relatively.

So if we have a div (oneDiv), with position: relative, and then another div (twoDiv) within that div, that has position: absolute, then the second div (twoDiv) will be positioned absolutely, but relative to its parent.

.oneDiv {
  position: relative;
  top: 100px;
  background-color: red;
  height: 200px;
  width: 200px;
}

.twoDiv {
  position: absolute;
  right: -50px;
  top: -50px;
  background-color: blue;
  height: 100px;
  width: 100px;
}

<div class="oneDiv">
  <div class="twoDiv">
  </div>
</div>

As such, "top" is no longer the top of the document, but the top of the childs parent. By using the above example, you can ensure you keep your layout, and if you move .oneDiv, regardless, twoDiv will follow with it.

Position children div above parent div

2 Answers2

Linked