solution:

1. put the relative position in "wrapper" div
2. for the overlaped div, put on absolute positions

css code example:
#wrapper{ position: relative; }
#box1 { position: absolute; top: 150px; left:60px;width: 200px; height: 200px; background-color: yellow; z-index: 20; }
#box2 {position: absolute; top: 100px; left: 0px;width: 200px; height: 200px; background-color: lime; z-index: 10; }

html code example:
<div id="wrapper">
    <div id="box1">
        <p>
            This box should be on top</p>
    </div>
    <div id="box2">
        <p>
            box 2</p>
    </div>
</div>