How to Install Operating System ??Complete Guide Installing The Operating System

How To Make Layer on Html with CSS

For those of you who use design software like Photoshop, of course, they are very familiar with layers, a small writer explains about layers. Layers are elements that can be stacked but are not used to determine objects, where we can create layers in HTML with CSS because it is CSS that can manage HTML elements.

To create layers in HTML with CSS using the z-index property, the function of the z-index property is no different from the Photoshop layer, more useful for stacking elements, but only loading each other within objects.

Before going forward, there are a number of articles that you might be looking for.

Read Too :

How to Make a Layer in HTML with CSS

The value of this z-index property that needs to be remembered is that we can use negative values ​​to specify an element under element 0, but in some browsers, it cannot work, so it is strongly recommended to use positive values ​​to set the layer in the CSS with this CSS.

element {
         z-index: 1; // that the element will be at layer 1
        }

The following is a complete example …

<! DOCTYPE html>
<html>
<head>
    <title> Layer </ title>
    <style type = "text / css">
    body {
        margin-top: 15%;
        margin-left: 32%;
        width: 500px;
        height: 150px;
    }
    .layer-1 {
        position: relative;
        z-index: 1;
        background-color: black;
        width: 200px;
        height: 100px;
    }
    .layer-2 {
        position: relative;
        z-index: 2;
        background-color: blue;
        width: 200px;
        height: 100px;
        margin-top: -25%;
        margin-left: 5%;
    }
    .layer-3 {
        position: relative;
        z-index: 3;
        background-color: red;
        width: 200px;
        height: 100px;
        margin-top: -25%;
        margin-left: 10%;
    }
    </ style>
</ head>
<body>
    <div class = "layer-1"> </ div>
    <div class = "layer-2"> </ div>
    <div class = "layer-3"> </ div>
</ body>
</ html>

The following results …

How To Make Layer on Html with CSS
How To Make Layer on Html with CSS

Seen in the source-code above an HTML element is stacked with each position of the stack of elements that have been determined using the z-index property above, this is of course very easy to manipulate elements as well as photoshop, an element that is not mixed with other elements, of course, it will be very easy to design according to your own wishes.

Before going forward, there are a number of articles that you might be looking for.

Read too :

Sending
User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *