How to Overlap Layer Dev tags using Z-Index and Positions

Trying to create elements in a webpage that overlap one another is easy once you understand the science behind Z-indexes and Positions. With Z-Index, the highest number is the front visitable element. The low number element (including a negative digit) is the bottom element in the stack. Here are examples for three elements:

#element-top {   z-index: 1; }
#element-middle {   z-index: 0; }
#element-bottom {   z-index: -1; }

 

In order to visually overlap your elements, you will have to also set their X and Y Positions. Below you will notice I set up a container div called #box and set the Position to “relative”. This way the internal divs elements can follow the #box outer boundaries. For the logo I chose “relative” because it’s set to 0 for left and top and for the nav I chose absolute to force it further right and down overlapping the #box element. Try using the sample code below.

<style type="text/css">
body,td,th {
 font-family: Arial, Helvetica, sans-serif;
}
#box {
 background-color: #CCC;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 width: 960px;
 height: 500px;
 clear: both;
 padding: 0px;
 position: relative;
}
#logo {
 background-color: #09F;
 height: 200px;
 width: 200px;
 margin: 50px;
 position: relative;
 top: 0px;
 left: 0px;
 z-index: 1;
}
#nav-top {
 height: 50px;
 width: 500px;
 background-color: #F63;
 position: absolute;
 top: 20px;
 left: 460px;
 z-index: 2;
 float: left;
 padding: 0px;
}
</style>
</head>
<body>
<div id="box">
<div id="logo"><h1>Company Name</h1></div>
<div id="nav-top">Home | Products | About | Contact</div>
</div>
</body>

You may also like...

Leave a Reply