How can I make margin-top relative to a div?

Question

How can I make margin-top relative to a div?

Navigation

#1 by (1 votes)

0

Well, it's the following, I have several divs, which are contained in a id="container" div. Some, I want them to be higher than others, but I intended to do margin-top, of all with respect to a single point, and not some other paras. That is, whenever I do margin-top, it's relative to the container div.

I do not know if it's possible to do this, if that's how I can do it.

Thank you.

css

asked by anonymous 16.03.2017 / 19:00

1 answer

When is / was the AbsoluteLayout used? JavaScript function is only working with 1 or 2 variables

score 1 · Accepted Answer

It would be best to put the inner divs in 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>