Layers in HTML:
<layer> tag is an element created by Netscape that allows an author to define precisely positioned 2-dimensional layout consisting of overlapping layers of transparent or solid content on a web page. All the content between the opening and closing LAYER tags can be treated as a single item of content that can be moved and altered in various ways.
The<layer> is browser specific so that it leads to confusion. To create layer effect we can use the z-index property of <div> tag.
The z-index property, when used in conjunction with the position property, enables you to specify which element should appear on top in the event of an overlap. An overlap can easily occur when using the position property and this is often desirable when creating advanced layouts.
z-index:
Normally the browser maintains the content as a stack of layers. The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. However, if you number your layers sequentially has you move up the stack. Many layers can have the same Z-index value if you want to place them at the same level.
You May Also Like:
Features of HTML
Structure of HTML Document
HTML Formatting Tags
Different Types of Lists in HTML
Tables in HTML
Position:
The division has to be placed on the screen so that their top left corner starts at pixel (0,0). They can be given a specific location but the placement of layers may be either absolute i.e a fixed point on the screen or relative to the placement of other content. This is optional and default is absolute.
Left and Right:
The locations of the divisions can be specified in pixels. These values are relative to the origin of the screen. These parameters are optimal and both default to (0,0)
Width and Height:
The size of the division in pixel’s can be specified by using this attributes i.e; the amount of space needed to display the content of the division.
Example:
<html>
<head>
<title> Layer effect example </title>
</head>
<body>
LAYER 1 ON TOP:
<div style="position:relative; font-size:50px; z-index:2;">LAYER 1</div>
<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">LAYER 2</div>
LAYER 2 ON TOP:
<div style="position:relative; font-size:50px; z-index:3;">LAYER 1</div>
<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4">LAYER 2</div>
</body>
</html>
You May Also Like:
HTML Css(Cascading Style Sheets)
Forms in HTML
Different CSS Properties
