Question

我有一个透明的图片，其链接覆盖了我们门户网站上的第三方应用程序。我们无法在按钮上添加html，所以我认为这将是解决方案。图像按预期运行并正确定位，但是，当管理员登录到门户网站并显示管理菜单时，它会推送＆＃34;不可见的图像向下约50像素，因此它会导致管理员混淆。

这是我的代码：

     <tr>
        <td>
            <a href="/Events.aspx">
            <img alt="Events" src="/Portals/1/transparent.png" 
              style="height: 43px; width: 200px; left: -150px; 
              position:absolute; z-index: 2000; top: 104px; right: 300px;  
              left: 500px;" /></a></td>
    </tr>

如果我将absolute更改为relative，则会导致界面出现其他问题。

有什么想法吗？

Answer 1

position: absolute上的<img>会使定位属性引用不是position: static的第一个祖先。在这种情况下，我假设它是<body>。尝试通过将position: relative添加到更近的祖先来移动定位的参考点更接近图像，并更新定位属性。这将使您的html更加健壮，因为在position: relative的祖先之外的其他内容不会影响图像的定位。

不幸的是，您的示例代码太不完整，无法帮助您查看可能的候选人。

根据实例

进行了更新

.template_style目前是position: relative的第一个祖先，因此所有定位属性都会引用它。尝试在模块上设置position: relative（如果可能，模块名称不是动态的，否则内联样式属性应该也能正常工作）

.DnnModule-2190 {
  position: relative;
}

之后更新top属性（0，44px，88px等我认为）和left属性（我认为是减去7）。

将图像定位到特定位置

1 个答案: