Posted by: prajapatinilesh | April 11, 2009

Overlap Div – z-index use in css html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”&gt;
<html xmlns=””&gt;
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Z-Index – Overlap DIV Example</title>
<style type=”text/css”>
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
div.div1 {
position: absolute;
top: 20px; left: 20px;
height: 250px; width: 250px;
color: white;
background-color: blue;
z-index: 1;}
div.div2 {
position: absolute;
top: 150px; left: 10px;
height: 100px; width: 300px;
background-color: #EB7CA7;
z-index: 20;}
div.div3 {
position: absolute;
top: 15px; left: 175px;
height: 125px; width: 125px;
background-color: yellow;
z-index: 10;}
<div class=”div1″>Div #1 </div>
<div class=”div2″>Div #2 </div>
<div class=”div3″>Div #3 </div>

Note: If we will increase z-index value in css div then it will take that div at top of all other div.



  1. Hi, interesting post. I have been pondering this issue,so thanks for posting. I will certainly be subscribing to your blog.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s


%d bloggers like this: