div's position and overlap

<div style="width: 150px; height: 100px; background-color: blue;">
blue
</div>
<div style="width: 100px; height: 150px; background-color: red;">
red
</div>

blue

red

<div style="width: 150px; height: 100px; background-color: blue;position: absolute;">
blue
</div>
<div style="width: 100px; height: 150px; background-color: red; position: relative;">
red
</div>

blue

red

<div style="width: 150px; height: 100px; background-color: blue;position: absolute;z-index:2;">
blue
</div>
<div style="width: 100px; height: 150px; background-color: red; position: relative;z-index:1;">
red
</div>

blue

red