I have a transparent image with a link which overlays a third party application on our portal. We cannot add html on the buttons so I thought this would be the solution. The image behaves as expected and positions itself correctly, however, when admins login to the portal and the admin menu appears it "pushes" the invisible image down for about 50 pixels so it causes confusion to the admins.
This is my code:
<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>
If I change the absolute to relative it causes other problems to the interface.
Any ideas?
The position: absolute on the <img> makes the positioning properties refer to the first ancestor that isn't position: static. In this case I'm assuming it's the <body>. Try moving the reference point for the positioning closer to the image by adding position: relative to a closer ancestor and update the positioning properties. This will make your html more robust as additional content outside of the ancestor that got the position: relative won't influence the positioning of your image.
Unfortunately your example code is too incomplete to help you see possible candidates.
updated based on the live example
.template_style is currently the first ancestor with position: relative so all positioning properties refer to that. Try setting the position: relative on the module by doing (if that's possible and the module name isn't dynamic, otherwise an inline style attribute should work just as well)
.DnnModule-2190 {
position: relative;
}
Afterwards update the top property (to 0, 44px, 88px etc. I think) and left property (substract 7 I think).