How can I margin-top a div?

Question

Well, the thing is, I have several Ivs, which are contained in a div of id="container". Some, I want them to be higher up than others, but I wanted to make margin-top, of all of them for one point, and not for others. That is, whenever I margin-top, it is relative to the container div.

I don’t know if it’s possible to do that, if that’s how I can do it?

Thank you.

Answer 1

The best thing would be to get the internal Ivs into position absolute:

#container {
  position: relative; /* importante */
}
div.inner {
  width: 100px;
  height: 50px;
  position: absolute;
}
div.inner:nth-child(even) {
  background-color: blue;
}
div.inner:nth-child(odd) {
  background-color: green;
}
div.inner:nth-child(1) {
  margin-top: 0;
}
div.inner:nth-child(2) {
  margin-top: 10px;
}
div.inner:nth-child(3) {
  margin-top: 20px;
}
div.inner:nth-child(4) {
  margin-top: 30px;
}
div.inner:nth-child(5) {
  margin-top: 40px;
}

<div id="container">
  <div class="inner">div1</div>
  <div class="inner">div2</div>
  <div class="inner">div3</div>
  <div class="inner">div4</div>
  <div class="inner">div5</div>
</div>