The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS tag not working with absolute positioned items

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #202801


    I’ve got a test site here:

    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


    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.



    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:

    … 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.



    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.


    Hey Paulie_D:

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


Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.