<

Using z-index Positioning in CSS

Posted on
6,127 Points
127 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
0 Comments

Featured Post

OWASP: Forgery and Phishing

Learn the techniques to avoid forgery and phishing attacks and the types of attacks an application or network may face.

Suggested Videos

Title Views Activity
Calling and Texting Links for Mobile Sites in HTML 215
Embedded Videos in HTML5 84
Introduction to HTML (Part 1) 111
Flexible Layouts 69
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month