<

Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x

Using z-index Positioning in CSS

Posted on
6,093 Points
93 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Join & Write a Comment

Suggested Videos

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses four methods for overlaying images in a container on a web page

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month