html - 如何在网站的某个点调整图像

Question

我正在尝试在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/），但模态窗口显示在可见部分下方屏幕，我必须向下滚动，这对用户不友好。

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

Answer 1

可能有两件事错了。您使用的 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，以便它不会查看布局的高度或“主体”，而是查看浏览器窗口大小的高度。

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