Absolute Positioning and <a> tag

HTML & CSS
1

Hello -

I have a link that I would like to absolutely position. However, as soon as I create the rule to absolutely position the link, it doesn’t work as a link any more.

Here’s my HTML:

    <div id="link_facebook">
    <a href="http://www.facebook.com/profile.php?ref=profile&id=100000876880984" target="new">
    <img src="../images/link_faceBook.gif" width="25" height="25" alt="Link to Facebook" />
    </a>
    </div>

And here’s my CSS:


div#link_facebook {
	position: absolute;
	top: 154px;
	left: 940px;
}

div#link_facebook img{
	border: none;
}

I’m sure it’s something simple but I can’t figure it out. Any help would be very much appreciated.

Chelsea

2

Hi, it could be a number of things. Just running that code locally shows it still working.

Could you post a link to the site in question?

3

The site is www.atlas.dr.com. I’m using Firefox for testing. I haven’t tried it in IE yet.

Thanks for looking at it.

4

Hi Chelsea,

Everything seems fine - it should be working without issue.

A few questions…

  1. What browser are you using?
  2. Do you have other elements on the page that could be overlapping your ‘#link_facebook’ DIV? (this would prevent the link from being clicked)
5

Bring the element to the front by adding a z-index:


div#link_facebook {
    position: absolute;
    top: 154px;
    left: 940px;
    z-index:1;
}
6

Hi Chelsea,

Taking a quick look at the site, I would say the ‘#nav’ or ‘#navbar’ DIV’s are over lapping the absolutely position ‘#link_facebook’ DIV.

Try adjusting the sizing of either (or both) of those DIV’s and see if the Facebook link becomes click able.

You might also like to research into the ‘z-index’ CSS rule - this could help you out.

7

Thanks, guys! Using the z-index rule worked. I tested it in IE8, IE7, IE6, Firefox, Chrome, Opera and Safari. :smiley: