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.


Tags:

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

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.
Wikepedia

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.

Comments

comments

[bctt tweet="z-index to Float Any Web Element on Top of Another"]
Tags:

div>