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.

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

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