z-index to Float Any Web Element on Top of Another

In this post

How to float any web element on top of another using z-index. Simple copy and paste code along with explanation of how to float web content.


z-index is a stacking order of an element within an html page. The higher the z-index number is the higher the element will appear with-in a page. A z-index only works in an element in positioned elements relative, absolute, fixed.


z-index is a CSS property that sets the stack order of specific elements. An element with greater stack order is always in front of another element with lower stack order.

Positioning Elements with z-index

The following exercise has been built to float 3 pngs of the same size on top of each other. So the image you think you are seeing in front of you is actually 3 images floating on top of each other inside a div that constrains them into a box 700px wide X 500px tall.

Click the following links to see the different images.

Blue Layer
Green Layer
Red Layer

Copy & Paste Code

First here’s the CSS pretty straight forward.

And here’s the HTML of the layered images. Each image lives in a div that floats on top pf a div on top of another div.

And if you want to do the same thing with a single image.

There’s not a whole lot to it, but a very handy thing to know nonetheless. This tip works not only with imagery, but with video as well. I actually used this code to float a transparent video over another video and it worked like a champ.

Thanks for reading and you’re welcome Internet.



z-index to Float Any Web Element on Top of Another Click To Tweet