Overlaping layer – z-index

z-index is use when you have layers of element and overlap each other.

They order of visibility is controlled by z-index.

.modalLayer1{
height: 50px;
width: 50px;
z-index: 6;
background-color:#000000;
position:absolute;
}

.modalLayer2{
height: 50px;
width: 50px;
z-index: 7;
background-color:#000000;
position:absolute;
}

The layer with larger z-index will be visible.

i.e. The larger z-index, the closer to the surface (viewer).

I think the z-index can go up to 1000 or even more.

So I just don’t care where it’s limit is…

REMARK: z-index need position to work together!

That is without position, all element are still on the same layer.

Visibility will according to their order on html.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s