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

本文介绍了Div在移动浏览器中的绝对位置问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I am having a lot of issues absolutely positioning a div called id="verticalGenesis" on the following website: genesispetaluma/index.html in a mobile browser, including both Safari and Chrome on the iPhone. I ideally am trying to position a logo to appear at the right of my screen using the following 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％，但我遇到了同样的问题.

This displays fine in all desktop browsers, just as I am expecting, but is appearing in the middle of the screen on mobile browsers. I have experimented with using right: 3% as well but I am having the same issues.

我确信必须对此问题有一个简单的答案，但是我已经在网上和stackoverflow上进行了无处不在的搜索，对此我一无所知.有人可以指出正确的方向吗?

I am sure that there must be a simple answer to this problem but I have searched everywhere on the web and stackoverflow and I can't figure this out. Could someone please point me in the right direction?

谢谢

克里斯

推荐答案

这不能完全解决您的问题，但可以使您更加接近.在父级div id = wrapFix上，您应该添加相对于它的位置:.问题在于，当您有一个具有位置:绝对的元素时，它需要知道它应该相对于绝对的位置.尽管它在桌面浏览器上运行良好，但在移动设备上却出现故障.可能是因为屏幕大小或其他原因.但我已将该行添加到该div中，似乎更接近于在iPhone上解决此问题.

This won't completely fix your issue but it will get you closer. On the parent div id=wrapFix you should add position: relative to it. The problem is that when you have an element with position: absolute it needs to know what it should be absolute against. While it worked fine on desktop browsers it broke on mobile. Probably because of screen size or something. But I've added that line to that div and it seems to be a lot closer to fixing the issue on iPhone.