tags:

views:

510

answers:

6

hey 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 over 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 ?

A: 

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

some help.

Dean J
A: 

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

Hogan
A: 

You can use absolute positioning.

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

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

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

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

tahdhaze09
A: 

The discussion in this SO question may be of help.

Usually, my solution of making first relative and positioning the second as an absolute works well.

buti-oxa
+3  A: 

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

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

Supporting CSS:

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

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:

/* num2 will be on top of num1 */
#num1 { z-index: 1; }
#num2 { z-index: 2; }
cballou
What I do is make the divs different colors, and then make one a different size so can tell which one is on top. Then I change it back to what I need it to be.
tahdhaze09
@tahdhaze09: if you are dealing with only two absolutely positioned divs you'd only need to change one background-color. If you see the color, it's clearly on top :-P
cballou
thanks that's perfect!!
From.ME.to.YOU
@Laith - Common practice on Stack Overflow is to accept the most correct and complete answer as correct if it fixes your issue or answers your question.
cballou