How do I overlay an anchor on top of an image using dotnetnuke

问题

I'm trying to edit a DotNetNuke webpage and I have an image that I need to display. On TOP of the image, I'd like to place an anchor. The trouble is that I don't want the entire image to be clickable, JUST the anchor, and I can't seem to get it to work.

Additionally, because it's a DNN site I'm not sure if I can edit the CSS, so I'm hoping for a solution that's pure html. I've tried all sorts of combinations but none of them seemed to work. Thanks

Below is my test html:

<div class="c_head h2_title_container">
    <img alt="" width="600" height="151" style="width: 356px; height: 101px;" src="/portals/224/img/blue-arrow-small.png"></img><span style="font-size:     18px;"><a href="mailto:email@email.net?" target="_top"><strong>Name Goes Here</strong></a></span>

    <br></br>

    <p class="team_bio" style="text-align: justify;"><span style="font-size: 16px;">Here is my test text.</span>
    </p>
</div>

回答1:

You should be able to set the parent element to position: relative, then add your anchor's parent element positioned absolutely:

<div class="c_head h2_title_container" style="position: relative;">
    <img ...></img>

    <div style="... position: absolute; top: 20px; left: 30px;">
        <a href="..." target="_top">...</a>
    </div>

    ...
</div>

来源：https://stackoverflow.com/questions/25330860/how-do-i-overlay-an-anchor-on-top-of-an-image-using-dotnetnuke