Posted by: prajapatinilesh | April 11, 2009

Overlap Div – z-index use in css html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<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;}
–>
</style></head>
<body>
<div class=”div1″>Div #1 </div>
<div class=”div2″>Div #2 </div>
<div class=”div3″>Div #3 </div>
</body>
</html>

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

Advertisements

Responses

  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:

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

Categories

%d bloggers like this: