Streaming live at 10am (PST)

Object Layers Front/Back


#1

Is there a function to control the “layers” of a design? For example, on one page I have an fixed at the top of the page. Everything underneath it, scrolls “behind” that top object. On another page I have the same set-up, but everything underneath the top object, scrolls “in front” of the object. I cannot figure out the difference how to make it scroll behind the top object.

Thanks


#2

What you’re looking for is called z-index. The higher the z-index, the higher it’s “layer value”.

In this example, anything with a z-index value LOWER than 9997 will show BEHIND this element, while everything above 9997 will show in front of it.

Keep in mind, that this is governed by parent elements. So, if you have something inside a div that has a z-index value of 100, you can’t assign a z-index value of 9999 to something inside that div, in order for it to show in front of a completely different div that has a z-index of 200.

I hope that makes sense. Play around with z-index and I think you’ll see what I mean.


#3

Excellent, that did it!

Thank you so much.

Now, if I could figure out a way to keep the url address bar from displaying on the live site.


#4

That is not possible, as far as I understand, for security reasons. You could hide the actual address and recreate an address bar with a fake address in it.


#5

Thanks. I currently have a web-based app for my business. When I go to the actual url, the url bar displays. When I save it to my home page and then open it from there, the url bar does “not” display, making it appear more as a native app. This is what I am trying to create.