Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add an inline layer in HTML?
The <ilayer> tag was a non-standard HTML element introduced by Netscape Navigator to create inline layers that occupy space within the normal text flow. Unlike the <layer> tag which positioned content above the text flow, <ilayer> created layers that pushed subsequent content after the space they occupied.
Important: The <ilayer> tag is obsolete and deprecated. It was never part of the HTML standard and was only supported by Netscape Navigator 4.x. Modern browsers do not support this tag, and it should not be used in contemporary web development.
Syntax
The basic syntax for the <ilayer> tag was −
<ilayer attribute="value">Content</ilayer>
Attributes
The HTML <ilayer> tag supported the following attributes −
| Attribute | Value | Description |
|---|---|---|
| above | layer name | The name of the inline layer that will be positioned directly above the current layer in the z-order. |
| background | URL | A filename or URL for an image upon which the inline layer's text and images will appear. |
| below | layer name | The name of the inline layer that will be positioned directly below the current layer in the z-order. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname |
The color to use for the inline layer background. |
| clip | number | The coordinates of the inline layer's viewable area. |
| height | pixels | The inline layer's height, in pixels. |
| left | number | The position of the left side of the inline layer. If the current inline layer is part of another layer called the parent layer, then the position is relative to the parent layer. |
| name | layer name | The name of the inline layer. |
| pagex | number | The position of the left side of the inline layer relative to the browser window. |
| pagey | number | The position of the top of the inline layer relative to the browser window. |
| src | URL | The URL of a page that will appear inside the inline layer. |
| top | number | The position of the top of the inline layer. If the current inline layer is part of another layer called the parent layer, then the position is relative to the parent layer. |
| visibility | show hide inherit |
Determines whether the inline layer is visible. |
| width | pixels | The inline layer's width, in pixels. |
| z-index | number | The inline layer's position within the z-order. Inline layers with higher z-index values are positioned above inline layers with lower z-index values. |
Example
Following is how the <ilayer> tag was used in Netscape Navigator 4.x −
<!DOCTYPE html> <html> <head> <title>HTML ilayer Tag</title> </head> <body> This <ilayer top="4">word</ilayer> is shifted down, while this <ilayer left="10">one</ilayer> is shifted over. With a negative value, words can be moved <ilayer top="-4">up</ilayer> and to the <ilayer left="-10">left</ilayer>. </body> </html>
Note: This code will not work in modern browsers as the <ilayer> tag is not supported.
Modern Alternatives
Instead of using the obsolete <ilayer> tag, modern web development uses CSS for positioning and layering effects. Here are the recommended alternatives −
Using CSS Position Property
Following example shows how to achieve similar layering effects using CSS −
<!DOCTYPE html>
<html>
<head>
<title>Modern CSS Layering</title>
<style>
.shifted-down {
position: relative;
top: 4px;
background-color: yellow;
padding: 2px;
}
.shifted-right {
position: relative;
left: 10px;
background-color: lightblue;
padding: 2px;
}
.shifted-up {
position: relative;
top: -4px;
background-color: lightgreen;
padding: 2px;
}
.shifted-left {
position: relative;
left: -10px;
background-color: pink;
padding: 2px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.5;">
This <span class="shifted-down">word</span> is shifted down, while this
<span class="shifted-right">one</span> is shifted over. With a negative value,
words can be moved <span class="shifted-up">up</span> and to the
<span class="shifted-left">left</span>.
</body>
</html>
The output shows positioned text with background colors for better visibility −
This word is shifted down, while this one is shifted over. With a negative value, words can be moved up and to the left. (Each highlighted word appears shifted according to its CSS positioning)
Using CSS Flexbox for Layout
For more complex layouts, CSS Flexbox provides a modern approach −
<!DOCTYPE html>
<html>
<head>
<title>CSS Flexbox Layering</title>
<style>
.layer-container {
display: flex;
align-items: center;
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
border-radius: 8px;
}
.layer-item {
padding: 8px 12px;
background-color: #007bff;
color: white;
border-radius: 4px;
position: relative;
}
.layer-item.elevated {
transform: translateY(-5px);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="layer-container">
<span class="layer-item">Item 1</span>
<span class="layer-item elevated">Elevated Item</span>
<span class="layer-item">Item 3</span>
</div>
</body>
</html>
This creates a modern layered layout with visual elevation effects using CSS transforms and shadows.
Browser Compatibility
The <ilayer> tag had extremely limited browser support −
| Browser | Support Status |
|---|---|
| Netscape Navigator 4.x | Supported (discontinued browser) |
| Internet Explorer | Never supported |
| Firefox | Never supported |
| Chrome | Never supported |
| Safari | Never supported |
| Opera | Never supported |
Conclusion
The <ilayer> tag is an obsolete, non-standard HTML element that should not be used in modern web development. Instead, use CSS positioning properties like position: relative, CSS Flexbox, or CSS Grid to achieve layering and positioning effects with full cross-browser compatibility and standards compliance.
455 Views
