Jump to content

Layers


skaterdav85
 Share

Recommended Posts

i created a layer, but how do i always keep it under the link, despite when i resize the browser window? this is my code:

<html><head><title>layers</title><style>#layer1 {position:relative;top:5px;left:10px;border:1px solid black;background-color:yellow;width:80px;visibility:hidden;}</style><script language="javascript">function showLayer() {document.getElementById('layer1').style.visibility='visible';}</script></head><body><div id="layer1">this is my first layer.</div><div align="center"><a href="#" onclick="showLayer();">Show Layer 1</a></div></body</html>

Link to comment
Share on other sites

Sorry, I don't understand. By below the link, do you mean closer to the bottom of the screen, or behind the link in the imaginary z-dimension?What browser are you using, and what effect are you seeing that you want to change?I'm using Firefox at the moment, and when I resize the window that contains your document, the link comes to within an inch of the yellow div, and then the shrinking stops. The link overflows past the right edge of my window.

Link to comment
Share on other sites

ok well i want to learn how to create layered menus. but i dont know how to position layers so they stay under a particular link all the time.
If you add a z-index: 10; to your css, then you can vary the number according to its position on the page in relation to other items. If you have a graphic and want text to be always on top of it then make the text a higher number than the graphic.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...