J'ai créé une page HTML5/reponsible-ish et j'utilise maintenant des requêtes média pour créer une version iPhone séparée. C'est toujours en cours, tellement de choses ne vont pas, mais un problème me rend un peu fou.z-index sur iPhone/version mobile du site
La disposition de mon smartphone est très différente de celle de mon bureau/iPad, j'ai donc dû utiliser le positionnement absolu pour mettre en place les ressources iPhone. J'ai un peu de texte de titre qui ne recouvrira pas l'image de la cassette, quoi que je fasse.
Tel est le titre css:
` #playlistTitle {
width:140px;
height:32px;
position:absolute;
top:120px;
left:60px;
z-index:500;
background-color:transparent;
border:1px solid red;
text-align:center;
`
et c'est le div il est censé couche au-dessus:
` #reelWrapper {
height:137px;
width:254px;
position:absolute;
margin:156px 6px 6px 16px;
background:url(../images/cassette.jpg) no-repeat 0 0;
z-index:50;
}
`
Vous pouvez voir sur l'iPhone que le fond de la div titre tombe au-dessous la cassette image div (j'utilise des bordures visibles pour montrer où ça ne fonctionne pas correctement). Ce que je veux, c'est à couche sur le dessus pour que je puisse le déplacer vers le bas pour ressembler à ceci: http://lisadearaujo.com/clientaccess/wot-sound/images/screen.jpg
La page est ici: http://lisadearaujo.com/clientaccess/wot-sound/indexiPad.html
Vous pouvez voir le reste de la css via la source, évidemment. ..
Toutes les idées, je serais très, très reconnaissant!