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

使用position：absolute和left，top来设置基于左上角的x，y coords

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

将它从左角定位在100,150

Answer 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 个答案: