如何使用 dotnetnuke 在图像顶部叠加锚点答案

【问题标题】：How do I overlay an anchor on top of an image using dotnetnuke如何使用 dotnetnuke 在图像顶部叠加锚点
【发布时间】：2014-10-09 10:49:54
【问题描述】：

我正在尝试编辑 DotNetNuke 网页，并且我需要显示一张图片。在图像的顶部，我想放置一个锚点。问题是我不希望整个图像都是可点击的，只是锚点，我似乎无法让它工作。

另外，因为它是一个 DNN 站点，我不确定我是否可以编辑 CSS，所以我希望有一个纯 html 的解决方案。我尝试了各种组合，但似乎都没有奏效。谢谢

下面是我的测试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>

【问题讨论】：

标签： html image dotnetnuke href

【解决方案1】：

您应该能够将父元素设置为position: relative，然后添加您的锚的父元素绝对定位：

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

【讨论】：

谢谢，这太完美了。