z-index

by zoho

HTML

<div class="A">A
    <div class="A1">A1</div>
</div>
<div class="B">B
    <div class="B1">B1</div>
</div>
<div id="A" class="A">A
    <div class="A1">A1</div>
</div>
<div id="B" class="B">B
    <div class="B1">B1</div>
</div>

CSS

.A, .B {
    width: 80px;
    height: 80px;
}
.A1, .B1 {
    width: 50px;
    height: 50px;
}
.A {
    background: gray;
}
.A1 {
    position: relative;
    z-index: 4;
    background: blue;
    left: 60px;
}
.B {
    background: red;
    margin: -20px 0 0 20px;
}
.B1 {
    position: relative;
    background: green;
    left: 20px;
    top: -40px;
}
#A {
    position: relative;
    z-index: 1;
}
#B {
    position: relative;
    z-index: 2;
}