how to overlap two div in css?


Tags: html,css

Problem :

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 ,

enter image description here



Solution :

add to second div bottomDiv

and add this to css.

 .bottomDiv{
       position:relative;
       bottom:150px;
       left:150px;
    }

http://jsfiddle.net/aw8RD/1/


    CSS Howto..

    How to position tables in ie 9 using css?

    How to re-render a page from a Google Chrome extension?

    How to display sub sub menu to the left side using CSS?

    how to define minimum height for tbody in css

    How to align images side by side without spacing when grouped within another element

    How to set an Ionic list item height with a background image

    How to properly use css will-change property?

    How to vertically center in yui-pure-css?

    How to prevent image moving when resizing window

    CSS how to deal with a lot of sprite without having to create a new css class

    How do I change the Mailchimp subscribe button color using inline CSS?

    how to make an odd shaped html/css menu?

    How to resize the clockpicker?

    How to display the :after content outside element

    How to make centered fixed width body responsive?

    How can I make the BODY element take up 100% height of the HTML element?

    CSS: How to get a positioned div to resize horizontally with window instead of getting scrollbars

    How to get at Apache Wicket PropertyColumn data to dynamically change CSS class based on content?

    How to select li child of a ul without nth-child via css?

    How to achieve this simple 3 column css layout

    “Pull center” in Bootstrap: A -D- B -E- C columns collapsing to A-B-C // D-E, how to get B between D and E?

    AngularJS - how to set css class for the custom directive?

    How do I use CSS to keep multiple images relatively sized withing the same outer element?

    jQuery: How to check if an element exists and change css property

    How to detect the form is blank or not by jQuery

    How to detect CSS inheritance source?

    W3.CSS how to get a standard header-[left-right]footer layout?

    How to put logo on navigation bar

    How to implement a table structure using CSS

    How to get a list of css attributes of an element with jquery