移动浏览器中Div绝对定位的问题

Question

我在以下网站上绝对定位一个名为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;
}

这在所有桌面浏览器中都能正常显示，正如我所料，但在移动浏览器的屏幕中间出现。我已尝试使用正确的：3％，但我遇到了同样的问题。

我确信必须有一个简单的答案才能解决这个问题，但我已经在网络和堆栈溢出的各个地方进行了搜索，我无法弄清楚这一点。有人可以指出我正确的方向吗？

谢谢，

克里斯

Answer 1

这不会完全解决您的问题，但会让您更接近。在父div id = wrapFix上你应该添加位置：相对于它。问题是，当你有一个位置为的元素：绝对时，它需要知道它应该是绝对的。虽然它在桌面浏览器上运行良好但却在移动设备上破解可能是因为屏幕尺寸或其他原因。但我已将该行添加到该div中，而且似乎更接近于在iPhone上解决问题。