Anchor Tags lower on my page Disappear when I use absolute positioning to position my menu

Question

I am using this to position my menu, it works across all browsers but the links (anchor tags) in the rest of my page stop working.

The menu is in the perfect spot but none of the links or image-map will work in most browsers

Sorry I am new to this

could you peek at the source code -thanks I am really trying to get this but i am sure stuck.

Success! - Removing the bottom:0 worked - thanks to all who helped. I am most grateful!

Answer 1

Okay...without code it's next to impossible to give you the right answer, and since your (x)html defines what CSS gets called, showing us one part of the puzzle isn't enough. Still...

1. 1. Have you remembered to place a `position:relative` on the parent element of whatever you're positioning absolutely?
2. 2. If you're positioning the elements to the same absolute position, there's a good chance that they're going to overlap and be hidden by the upper-most/last of the positioned elements
3. Use semantics and established techniques to help yourself learn:
   1. howtocreate.co.uk
   2. Css play.co.uk
   3. ...and so many others: Google search results

Answer 2

<div align="center" style="margin: auto; left: 0pt; right: 0pt; bottom: 0pt; position: absolute; top: 197px; z-index: 1;">

Remove the "bottom: 0pt" and everything is fine for this problem.

But one thing, you should put the styles for this div in your css file ;)

Answer 3

I think that removing the bottom: 0pt; should do the trick?

Answer 4

You were specifying both top:0 and bottom:0 so the div was stretched larger than the menu height.

Because absolute positioning takes it out of the flow and puts the div in its own layer, it was covering the links.

Besides removing the bottom:0, you can remove most of the other styles too.

<div align="center" style="position: absolute; top: 197px;">