Question

Is there any way to start drawing divs from the same point? That means if I add new div and then I add another div, they will appear above each other. Because I want to move them all together depending on the same point.

CSS:

#num1,#num2{
    display : inline
    position:relative;
    left:50px;
}

HTML:

<div id='container'>
    <div id='num1'></div>
    <div id='num2'></div>
</div>

So what should I add to this code so when the browser render this code the 2 divs will be on the same place?

Answer 1

All statements regarding absolute positioning are correct. People failed to mention, however, that you need position: relative on the parent container.

#container {
  position: relative;
}
#num1,
#num2 {
  position: absolute;
  left: 50px;
}

<div id='container'>
  <div id='num1'>1</div>
  <div id='num2'>2</div>
</div>

Depending on which element you want on top, you can apply z-indexes to your absolutely positioned divs. A higher z-index gives the element more importance, placing it on the top of the other elements:

#container {
  position: relative;
}
#num1,
#num2 {
  position: absolute;
  left: 50px;
}
/* num2 will be on top of num1 */
#num1 {
  z-index: 1;
}
#num2 {
  z-index: 2;
}

<div id='container'>
  <div id='num1'>1</div>
  <div id='num2'>2</div>
</div>