These images are placed in a specific position using a grid format to determine placement in the browser window. Values are given from the margins top and left positions. Positioning is either absolute or relative. Any box can be defined with the box properties and values.

Style Tags

<p class="greenbox"><img src="images/bckgrnd2.jpg">z-index1</p>
<p class="redbox"><img src="images/bckgrnd1.jpg">z-index2</p>

.greenbox {position:absolute; top:100px;left:550px;z-index:1}
.redbox {position:absolute;top:80px;left:510px;z-index:2}

Layered Text with Z-Index Style Rules

The z-index is used to indicate the stacking order. The higher the value the forward the object appears. The two lines of text have the same positioning from the top and left margins therefore one is on top of the other. The higher the z-index value will display that object in front or on top of the stack. The absolute positions eliminates the float capabilities.

Z-Index Example

.foreground{font-family:Impact;
font-size:50px; color:#336699;
top:400px;left:450px;position:absolute;z-index:2

.smallfont{font-family:Zapf Chancery;
color:#ffcccc;font-size:30px;
top:400px;left:400px;position:absolute; z-index:1}