Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to position two divs above each over

Tags:

html

css

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?

like image 304
trrrrrrm Avatar asked Dec 02 '09 18:12

trrrrrrm


People also ask

How do you position two divs on top of each other?

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).

How do I put two divs up and down?

Also we can make space between the two divs by adding margin-right to the first div and/or margin-left to the second div. There are several ways to place HTML divs side-by-side. The simplest and most efficient way to do this is to make use of a handful of CSS properties (i.e., float, grid, and flex).

How do I make a div float above another?

Use position:absolute; and set the "popup" one to be positioned within the boundaries of the other. The "popup" div should likely also be smaller. Use z-index to stack the "popup" one above the other one (give it a higher value for z-index ).


2 Answers

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>
like image 137
Corey Ballou Avatar answered Oct 06 '22 01:10

Corey Ballou


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

like image 32
tahdhaze09 Avatar answered Oct 06 '22 03:10

tahdhaze09