Html 移动浏览器中 Div 绝对定位的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15933498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Issues with Absolute Positioning of Div in Mobile Browser
提问by Chris Reedy
I am having a lot of issues absolutely positioning a div called id="verticalGenesis" on the following website: http://genesispetaluma.com/index.htmlin 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:
我在以下网站上绝对定位名为 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;
}
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.
这在所有桌面浏览器中显示良好，正如我所期望的那样，但在移动浏览器的屏幕中间显示。我也尝试过使用 right: 3% 但我遇到了同样的问题。
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?
我确信这个问题一定有一个简单的答案，但我在网络和 stackoverflow 上到处搜索，但我无法弄清楚。有人可以指出我正确的方向吗？
Thanks,
谢谢，
Chris
克里斯
回答by Fernker
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.
这不会完全解决您的问题，但会让您更亲近。在父 div id=wrapFix 上，您应该添加 position: relative 到它。问题是当你有一个带有 position: absolute 的元素时，它需要知道它应该绝对反对什么。虽然它在桌面浏览器上运行良好，但在移动设备上却失败了。可能是因为屏幕大小或其他原因。但我已将该行添加到该 div 中，似乎更接近于解决 iPhone 上的问题。
