css html why my divs overlapping code example

Example: css overlapping divs

html :
<div class="imageDiv"></div>
<div class="imageDiv bottomDiv"></div>

css:
 .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;
        }

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