3

我在以下网站上绝对定位一个名为 id="verticalGenesis" 的 div 时遇到了很多问题：http: //genesispetaluma.com/index.html在移动浏览器中，包括 iPhone 上的 Safari 和 Chrome。理想情况下，我尝试使用以下 css 将徽标放置在屏幕右侧：

#verticalGenesis {
background-image: url("../img/Genesis%20Text.gif");
background-repeat: no-repeat;
display: block;
height: 570px;
opacity: 0.8;
position: absolute;
right: 3%;
top: 70px;
width: 123px;
}

正如我所期望的那样，这在所有桌面浏览器中都可以正常显示，但在移动浏览器的屏幕中间显示。我也尝试过使用 right: 3% ，但我遇到了同样的问题。

我确信这个问题必须有一个简单的答案，但是我在网络和 stackoverflow 上到处搜索，但我无法弄清楚。有人可以指出我正确的方向吗？

谢谢，

克里斯

4

1 回答 1

13

这不会完全解决你的问题，但它会让你更接近。在父 div id=wrapFix 上，您应该添加 position: relative 到它。问题是当你有一个带有 position: absolute 的元素时，它需要知道它应该绝对反对什么。虽然它在桌面浏览器上运行良好，但在移动设备上却失败了。可能是因为屏幕大小什么的。但我已将该行添加到该 div 中，它似乎更接近于解决 iPhone 上的问题。

于 2013-04-10T19:55:02.337 回答