Overlapping Elements

When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order. An element with greater stack order is always in front of an element with a lower stack order:

HTML file:	Displayed by browser:
<style> img { position: absolute; left: 300px; top: 10px; z-index: -1; } </style> <body> <h1>This is a heading</h1> <img src="../html_beg/images/w3css.gif" width="100" height="140"> <p>Because the image has a z-index of -1, it will be placed behind the text.</p> </body>	This is a heading Because the image has a z-index of -1, it will be placed behind the text.

HTML file:

Displayed by browser:

<body> <h1>This is a heading</h1> <img src="../html_beg/images/w3css.gif" width="100" height="140"> <p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>

This is a heading

Because the image has a z-index of -1, it will be placed behind the text.

Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top. Also, on this page, I set my table's TD to relative positioning, so the img is positioned to the relative parent that contains it.