<

Go Premium for a chance to win a PS4. Enter to Win

x

Using z-index Positioning in CSS

Posted on
6,100 Points
100 Views
Last Modified:
Experience Level: Beginner
5:09
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.

Video Steps

1. Create a new HTML document with an internal stylesheet.

2. Create a div in CSS and name it Red. Define its position as relative. Define its position as top:10px and left:50px. Define its dimensions 500px by 500px. Define its background-color as red.

3. Create another div and name it Blue. Define its position as absolute. Define its position as top:40px and left:20px. Define its dimensions as 300px by 300px. Define its background-color as blue.

4. Create another div and name it Yellow. Define its position as relative. Define its position as top:30px and left:20px. Define its dimensions as 100px by 100px. Define its background-color as yellow.

5. Create another div and name it Green. Define its position as absolute. Define its position as top:200px and left:100px. Define its dimensions as 50px by 50px. Define its background-color as green.

6. In the HTML, type the tags for all of the divs. Place the Yellow div inside the Red div. Place the Green div before the Blue div.

7. Define div.Red's z-index as 1. Define div.Blue's z-index as 2. Define div.Yellow's z-index as 100. Define div.Green's z-index as 100.

8. When the Green div's z-index is default, it appears below the Blue div because of normal CSS stacking rules. When its z-index is set higher than the Blue z-index, it appears on top of the Blue div. The Yellow div doesn't appear on top of the Blue div despite its higher z-index because its nexted inside the Red div, which has a lower z-index.

0
Comment
0 Comments

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month