Menu
I have two div likes ,
<div class="imageDiv"></div> <div class="imageDiv"></div> and css class ,
.imageDiv { margin-left: 100px; background: #fff; display: block; width: 345px; height: 220px; padding: 10px; border-radius: 2px 2px 2px 2px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } You can see the result Here :)
I want to overlap this two div likes ,
656
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 ).
With CSS, it's quite easy to overlap two div elements over one another. To achieve this task we have to use the z-index property in combination with the position property. The z-index property defines the stacking order of elements. An element with a higher z-index value covers the element with a lower z-index value.
Use CSS position: absolute; followed by top: 0px; left 0px; in the style attribute of each DIV. Replace the pixel values with whatever you want. You can use z-index: x; to set the vertical "order" (which one is "on top"). Replace x with a number, higher numbers are on top of lower numbers.
Use z-index and top . This will layer the div on bottom, the image and then the span (overlay) on top. To set the positioning from the top edge, use top , which can be used with negative numbers if you need it to be higher on the Y axis than it's parent.
add to second div bottomDiv
and add this to css.
.bottomDiv{ position:relative; bottom:150px; left:150px; } http://jsfiddle.net/aw8RD/1/
144
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
