如何在网站的某个点调整图像答案

【问题标题】：How to adjust image on certain point of website如何在网站的某个点调整图像
【发布时间】：2013-10-09 08:42:06
【问题描述】：

我正在尝试在http://offbeatdestination.com 的菜单栏顶部放置一个木制展示板。我已经通过使用以下代码成功地做到了这一点：

<div style="position:relative;min-width:960px">
    <img src="http://i43.tinypic.com/16nkvl.png" style="position: absolute;left:145;top:140" />
</div>

上面的代码我面临的问题是我使用模态在页面上显示图片（例如http://offbeatdestination.com/infinity-resort/），但是模态窗口显示在屏幕可见部分的下方，并且我必须向下滚动，这对用户不友好。

如果我删除上面的代码一切都很好。如何在不影响弹出屏幕的情况下放置我的图像。

【问题讨论】：

我有点困惑，但您可能需要将 DIV 设置为绝对位置。有测试页吗？
我正在使用 wordpress 界面，所以我没有测试页面。我试过绝对做，但没有效果。我现在已将上述代码放在我的网站上，因此请通过单击内容区域中的图像来查看此链接 (offbeatdestination.com/infinity-resort)

标签： html image adjustment

【解决方案1】：

可能有 2 个问题。您使用的 Javascript 计算位置错误。解决这个问题的一个非常简单的方法是在你的 CSS 表中放置一些超前的样式。可能不是最好的，因为您的图像高度不同，但它可能会起作用。

#colorbox{
top: 50% !important; /*50% from the top and using !important overtakes any inline styles*/
margin-top: -196px; /*Negative margin of the half the height of the largest image in the slideshow.*/
position: fixed; /*fix the position in the browser*/
}

如果有任何事情，您实际上需要进入并修复 Javascript，以便它不会查看布局的高度或“正文”，而是查看浏览器窗口大小的高度。

【讨论】：

【解决方案2】：

使用 position:absolute 和 left,top 根据左上角设置 x,y 坐标

<div style="position:absolute; left:100px; top:150px;">
    <img src="http://i43.tinypic.com/16nkvl.png" />
</div>

将其定位在距左角 100,150 处

【讨论】：

我试过绝对没有效果。我现在已将上述代码放在我的网站上，因此请通过单击内容区域中的图像来查看此链接 (offbeatdestination.com/infinity-resort)
谢谢@Gustavo Suarez，您的代码认为对我来说可以正常工作，非常感谢
澄清一下，position、left 和 top 值不应该在图像样式上，而是在 div 中