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?
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 ).
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).
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 ).
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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With