移动浏览器中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上解决问题.