Des problèmes avec le Positionnement Absolu de Div dans le Navigateur Mobile

Je vais avoir beaucoup de questions absolument le positionnement des div appelé id="verticalGenesis" sur le site web suivant: http://genesispetaluma.com/index.html dans un navigateur mobile, y compris Chrome et Safari sur l'iPhone. J'idéalement suis en train de les positionner un logo à apparaître à la droite de mon écran en utilisant le code css suivant:

#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;
}

Cette affiche correctement dans tous les navigateurs de bureau, tout comme je m'attends, mais apparaît au milieu de l'écran sur les navigateurs mobiles. J'ai expérimenté avec l'aide de droite: 3%, mais je suis les mêmes problèmes.

Je suis sûr qu'il doit y avoir une réponse simple à ce problème, mais j'ai cherché partout sur le web et stackoverflow et je ne peux pas comprendre cela. Quelqu'un pourrait-il svp me pointer dans la bonne direction?

Merci,

Chris

c'est mieux si vous remplacez le positionnement absolu. semble que les navigateurs mobiles ne fonctionnent pas bien avec eux.

OriginalL'auteur Chris Reedy | 2013-04-10

  1. 12

    Ce ne sera pas complètement résoudre votre problème, mais il vous en rapprocher. Sur le parent div id=wrapFix vous devez ajouter un position: relative. Le problème est que lorsque vous avez un élément avec position: absolute, il doit savoir ce qu'elle doit être absolue contre. Alors qu'il a bien fonctionné sur les navigateurs de bureau, il se brisa sur mobile. Probablement à cause de la taille de l'écran ou quelque chose. Mais j'ai ajouté cette ligne pour que le div et il semble être beaucoup plus près de résoudre le problème sur l'iPhone.

    Merci, cela a réglé le problème avec la version mobile de Safari, mais la version de Chrome n'est pas encore le positionnement de la div correctement. Toutes les autres idées sur la façon de résoudre chrome?
    Pas vraiment, je ne peux pas tester que tout. Je peux debug sur iPhone dans Safari sur mon Mac mais je ne peux pas faire avec google Chrome. Juste continuer à jouer un peu avec elle et essayer différentes choses. C'est probablement quelque chose d'apparemment petit, mais qui est d'avoir un grand effet.

    OriginalL'auteur Fernker