CODEWITHSUNDEEP
csshtml
trrrrrrm
trrrrrrm

Reputation: 11822

how to position two divs above each over

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?

Upvotes: 33

Views: 106530

Answers (5)

Corey Ballou
Corey Ballou

Reputation: 43547

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>

Upvotes: 57

tahdhaze09
tahdhaze09

Reputation: 2213

Use z-index to position divs on top of one another:

[http://www.w3schools.com/Css/pr_pos_z-index.asp][1]

So, you'll position the divs with absolute/relative positioning and then use z-index to layer them:

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Upvotes: 3

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103155

You can use absolute positioning.

  #num1,#num2{ display : inline position:absolute; left:50px;top:10px; }

Upvotes: -1

Hogan
Hogan

Reputation: 70528

I believe the only way to do this is to use absolute positioning

Upvotes: 0

Dean J
Dean J

Reputation: 40359

Make the first one position:absolute, which should take it out of the normal flow of the page.

some help.

Upvotes: 0

Related Questions