How to Make Objects Overlap on CSS
The “z-index” property in CSS (Cascading Style Sheets) tells the browser how to stack objects on a Web page. This comes in handy when you want to force a navigation bar over a block of content or partially hide one box behind another. In order to use “z-index” stacking, the objects must already have a position but you can set objects to use “relative” positioning that does not effect where they display on the page unless you change “top” and “left” values. Use “z-index” with “top” and “left” to stack and overlap objects.
Other People Are Reading
Instructions
-
-
1
Open your Web page in an editor and find the ID names of both the top and the bottom objects:
<div id=”top”>
Top object here
</div>
<div id=”bottom”>
Bottom object here
</div>Add ID names if you see none, following the examples shown above.
-
2
Go to the “<style>” tags of your Web page located in the head or open the stylesheet. Add “<style>” tags between the “<head>” tags if you do not have either of these things:
<style type=”text/css”>
</style> -
-
3
Write a style rule for each object:
#top {
}
#bottom {
}These style rules select the objects by their ID names.
-
4
Give each object a relative position and set their “z-index” properties:
#top {
position: relative;
z-index: 1;
}
#bottom {
position: relative;
z-index: 0;
}Since the bottom object has a lower “z-index” value than the top object it will display below the top object. At this point, however, it will just display next to the top object.
-
5
Move the position of the bottom object to put it behind the top object. You can manipulate the position of an object by setting “top” and “left” properties:
#bottom {
position: relative;
z-index: 0;
top: -50px;
left: -50px;
}This example moves the bottom object behind the top object 50 pixels to the right and 50 pixels up from its original position.
-
1
Tips & Warnings
Check the "z-index" property of other page objects; if a parent object uses this property the nested objects inherit its "z-index" position.
