tag not working with absolute positioned items

[Russell]

Hello:

I’ve got a test site here:

http://testing004.compoundeyedesign.com/

It has a logo graphic in the top left, along with some red type. I want these to be a clickable link which jumps further down the page to the ‘What is Arthur + Martha’ section which has a <a id="what-is-AM-text"></a> tag in the code. Currently it isn’t working.

I think it’s because I’ve set the two graphics to have position: absolute;. If I use my browser tools and highlight the <a> tag, I can see it’s collapsed with no height and not appearing on the page.

The exact markup is:

<a href="#what-is-AM-text" class="masthead-link">

<h1 class="masthead">Arthur + Martha</h1>

<img class="what-is-am" src="assets/what-is-AM.png" alt="What is Arthur + Martha?"></a>

Any suggestions?

Kind regards, Russell

[Paulie_D]

A Codepen demo would be more use that a remote link.

It helps us to see the actual HTMl & CSS without having to inspect the site with developer tools.

Help us help you.

[Russell]

@Paulie_D:

Ok, my apologies. I wasn’t sure if taking it out of context might not be the most accurate way of diagnosing the issue.

There’s a CodePen here:
http://codepen.io/anon/pen/jPVmXr

… Annoyingly, my code seems to work on CodePen: I can see the two graphics act as links when I hover over them. So there must be something else on my original webpage that’s interfering with the graphics. Perhaps the video? I put a z-index of -1 on the video in Chrome web inspector and it doesn’t seem to affect it.

Thanks for your time and I look forward to any suggestions.

R

[Paulie_D]

At it’s basic level your #hero div has a z-index of -1 so it’s sitting under whatever comes after it.

I’m not sure why that has been applied but if you remove it and set the

.masthead-link {
  background-color: yellow;
  display: block;
  position: relative;
  z-index: 15;
}

The link pops up on top and is now clickable.

This may break other functionality of the site

You seem to have a curious stacking order going on there that you might want to look into.

[Russell]

Hey Paulie_D:

Perfect, thank you. I guess my z-indexes did get a bit unwieldily. It’s fixed now — much appreciated!

R

[Author]

Posts