The boxes are positioned using
CSS Absolute Positioning.
The boxes are layered using CSS Z-Index.
The Yellow box (Layer1) has a Z-Index
of 1 (Bottom)
The Blue box (Layer2) has a Z-Index of 2 (on top of Yellow Box)
The Text (Layer3) has a Z-Index of 3 (on Top)
<style type="text/css">
<!--
#Layer1 {
background-color: #FFFFCC;
position: absolute;
z-index: 1;
height: 100px;
width: 100px;
left: 100px;
top: 100px;
}
#Layer2 {
background-color: #CCCCFF;
position: absolute;
z-index: 2;
height: 100px;
width: 100px;
left: 150px;
top: 50px;
}
#Layer3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #000000;
text-decoration: underline overline;
position: absolute;
z-index: 3;
left: 50px;
top: 100px;
}
-->
</style>