3D Floating Element Using The Z-Index

After hours of trying to figure out how to add html page elements that stay in-position on screen – I finally got it yesterday. For designers it’s a combination of the z-index property and setting a fixed position in the div properties.

Later that evening while watching Dallas lose to the Giants I kept thinking about how cool a floating property would look with a drop shadow. This would really give it a 3D look and I’m happy to say it does.

Check out the “Gourmet Slice” special that floats over the entire site at www.JoeysPanamaCityBeach.Com. This will really get the point across well.

In this example I used a graphic but it could have been html just as easily. In fact, the original examples of the floating box was for navigation bars that follows you down the page. Some of these are just fixed footers and headers – sometimes referred to as “sticky”. I’ve done a few but none of them are online as of today. I plan to add fixed footer navigation using these techniques on the next website I do.

On this same site I added another dimension to this whole thing by adding a link, with a roll-over state that opens a YouTube video inside a lightbox. I could have side-stepped the YouTube version by inserting an iframe into the lightbox to run the video from my own server and using one of my video players with a Studio 1 or client logo in place of the YouTube logo and link back. Check it out here!