Learning about the Z-Index Property!

When putting a picture behind text, you are layering different elements on top of one another.  In the CSS world, they call this the “z-index property,” and when you manipulate the z-index property, you manipulate the stack order of the element.  The stack order simply refers to the order in which elements are stacked.  So when layering pictures and text, the picture is stacked behind the text.

To begin, you need to first know how to code for images in HTML.  The tag for images is <img>.  However, you cannot use the image tag alone, you also need a source attribute, which shows where the image is stored in the form of a url.  In total the syntax needed to add an image to you web page looks like:

<img src=”url”>

The img tag occurs where it is placed in the document.  If you place it in the middle of a sentence, the image will appear right in the middle of that sentence.

Now that I’ve shown you the basics of adding images to web pages, let’s learn about layering and the z-index property.  First, you need to make a div tag in your HTML code, in order to make changes in CSS.  This is simply done by:

<image div =”image”>.

Then, in your CSS document, you need to make that same tag by writing :


After that, you need to actually start coding for the z-index property.  When you code for the z-index property, you need to make sure that the images you are using are positioned elements.  This means that you need to code for the position as absolute, fixed, or relative.  According to css-tricks.com, the three major differences between the three positions are as follows:

Relative positioning actually means “relative to itself.”  Therefore, if you do not change any other positioning attributes, nothing will happen to the image.  However, if you do add a positioning attribute (like top:10px) then the image will move down 10px from where it was originally.

Absolute positioning allows you to place an image anywhere you want it.  All you need to do is set the positioning elements (top, right, left, and bottom).  However, these positions will be relative to the parent element with absolute positioning (which is why you might prefer to use relative as opposed to absolute).  Most importantly, these elements will be removed from the flow of the elements on the page – it doesn’t affect any other elements and other elements do not affect it.

Fixed positioning is an uncommon form of positioning. It is relative to the browser window itself.  The image will not move even when the page is scrolled down or up.

Once you have decided which positioning to use, you just need to add the code into your CSS document.  According to w3schools.com, it should look something like this:








Which should then translate to an image that looks like this:


Please note, that not only can you layer pictures with text, but you can also layer pictures over pictures.  Which should look something like this:



If you would like to learn more about the z-index property or would just like to play around with it, go to the w3schools tutorial at http://www.w3schools.com/cssref/pr_pos_z-index.asp


Becky Brown

~ by rab160 on September 16, 2012.

%d bloggers like this: