Z-index CSS Rules

These images are placed in a specific position using a grid format to determine placement in the browser window. Values are given from the top and left of the page. These positions can either be absolute or relative.

The Z-index is used to indicate the stacking order. The higher the value the forward the object appears. The three images have different positions from the top and the left creating the stacking appearance. The blue box (z-index:3) is in front or on top of the stack followed by the red box and lastly is the green box.

Any box can be defined and displayed with the box properties and values. Display a box with these values: position:absolute; top:200px; left:200px; height:100px; width:100px; background-color:#ff0000
 

HTML Tags

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

CSS Style Tags

.greenbox {position:absolute; top:100px;left:590px;z-index:1}
.redbox {position:absolute;top:130px;left:595px;z-index:2}
.bluebox {position:absolute;top:170px;left:600px;z-index:3}

Fun Z-Index Style Sheet 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 absolute positions eliminates the float capabilities.

Z-Index Example

Running Wild Mustangs

.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}

Define Classes and IDs
Div and Span Elements
Pseudo Classes
Drop Caps
Drop Shadow
Display Attributes

z-index 1 

z-index 2 

z-index 3  

Web Design with XHTML Part II
Prince George's Community College
Doris Cuffey, Instructor