Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Implementation of CSS Layers using Z-index and Positioning Attributes

In this article I will cover the concept of CSS - Layers. I will discuss the implementation of CSS Layers by using Z-index and positioning attributes.

Introduction:

In this tutorial you will help you to understand the concept of Layers using the z-index and positioning properties. Z-index property will describe the CSS operation in 3-D.

First of all, to create a layer all you need to do is, assign the position attribute to your style. The position can be either absolute or relative which itself is defined with the top and left properties.

Most of the CSS beginners may start using relative and absolute positioning when creating their web page layouts. Well, this might work but often is not a good practice. When working with absolute position, it actually takes the contents out of the document flow, creating many layers above each other and these layers does not recognize each other, hence, nothing will react to each other. This is usually the primary source of major issues in absolute positioning.

Usually, absolute positioning is not recommended for general web page layout. If you ask me, I only use absolute positioning when I need to position something that needs to be in a certain position relative to its parent.

Following Script will show you to layer approach of CSS. Listed script will handle the positioning in relative and absolute way.

Listing 1: Concept of Layer using Absolute and Relative Positioning

<!DOCTYPE html>
<html>
<head>
<title>Mrbool Tutorials - z-index</title>
</head>
<body>
Example 1 - Top layer
<div style="position:relative; font-size:50px; z-index:2;">Relative Layout A</div>
<div style="position:absolute; top:-50; left:5; color:green; font-size:60px; z-index:1">Absolute Layout  B</div>

Example 2 - Top layer
<div style="position:relative; font-size:50px; z-index:0;">Relative Layout A</div>
<div style="position:absolute; top:-50; left:5; color:blue; font-size:80px; z-index:4">Absolute Layout B </div>
</body>
</html>
Above figure is simple layer layout with absolute and relative positioning

Figure 1: Above figure is simple layer layout with absolute and relative positioning

Z- index Property:

CSS operates in three dimensions - Height, Width and Depth. Let’s explore the concept of layers, this means the order in which the elements overlap one another.

In CSS, layers refer to applying the z-index property to elements that overlap each other. For this purpose, you can assign each element a number (z-index). An element with a highest z-index is on the top followed by the second lower z-index.

Let’s explore the position property along with z-index property. This example has an image and overlapping text over it and includes the overlapping idea of CSS layer with z-index property.

Listing 2: Z-index with Image and Text

<!DOCTYPE html>
<html>
<head>

<title>Mrbool Tutorials - z-index</title>

<style type="text/css">
img
{
position:absolute;
left:10px;
top:10px;
z-index:-2;
}
</style>
</head>

<body>
<h2>Text Over the Image with Normal z-index.</h2>
<img class='imagem_artigo' src="BackImage.jpg" width="200" height="200" />
</body>
</html>
This figure is output of Z-index property in which one html element (Image) is placed behind another HTML element (text) and one more important point is that z-index only works on positioned elements (position:absolute, position:relative,)

Figure 2: This figure is output of Z-index property in which one html element (Image) is placed behind another HTML element (text) and one more important point is that z-index only works on positioned elements (position:absolute, position:relative,)

Let’s discuss one more example of layers which is implemented by div tags. The div tag have relative positioning and different z-indexes.

Listing 3: Another example of Layers

<!DOCTYPE html>
<html>
<head>
<title>Mrbool Tutorials - z-index</title>
</head>
<body>
<div style="background-color:Green;width:100px;height:100px;position:relative;top:10px;left:85px;z-index:5;">
</div>
<div style="background-color:yellow;width:100px;height:100px;position:relative;top:-40px;left:40px;z-index:2;">
</div>
</body>
</html>
Output of Layers with background Colors

Figure 3: Output of Layers with background Colors.

Layers can be used in many situations. For example, developers may use z-index to create effects in headlines instead of creating these as graphics. It is faster to load text as well as it provides a potentially better ranking in search engines. You can use z-index property in following areas:

  • Flowing Banners
  • Moving Object in Games
  • Menus
  • Popups
  • Map Enabled Applications

Conclusion:

This tutorial covered concepts of layer with z-index property. I also given you some areas where you can use these concepts, you can write some applications to implement and explore the concepts. You can also develop some dynamic and interactive web pages. If you have any queries, please comment here, Mrbool team will be happy to answer the queries.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login