HTML5/レスポンシブ風のページを作成し、メディアクエリを使用して別の iPhone バージョンを作成しています。それはまだ進行中なので、多くの問題がありますが、1 つの問題が私を少し狂わせています。
私のスマートフォンのレイアウトはデスクトップ/iPad バージョンとは大きく異なるため、iPhone アセットを配置するために絶対配置を使用する必要がありました。何をしてもカセット画像の div の上に重ならないタイトル テキストが少しあります。
これはタイトルの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;
`
そして、これはそれが上に重ねることになっているdivです:
` #reelWrapper {
height:137px;
width:254px;
position:absolute;
margin:156px 6px 6px 16px;
background:url(../images/cassette.jpg) no-repeat 0 0;
z-index:50;
}
`
iPhone では、タイトル div の下部がカセット イメージ div の下にあることがわかります (適切に機能していない場所を示すために、目に見える境界線を使用しています)。私が欲しいのは、それを上に重ねて、下に移動して次のようにすることです: http://lisadearaujo.com/clientaccess/wot-sound/images/screen.jpg
ページはこちら: http://lisadearaujo.com/clientaccess/wot-sound/indexiPad.html
明らかに、ソースを介して残りのcssを見ることができます...
どんなアイデアでも、私はとても、とても感謝しています!