Question

我已经创建了一个HTML5 / reponsive-ish页面，现在正在使用媒体查询创建一个单独的iPhone版本。它还在进行中，所以有很多不妥之处，但有一个问题让我有点疯狂。

我的智能手机布局与我的桌面/ 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，显然......

任何想法，我都会非常非常感激！

Answer 1

检查div上包含#playlistTitle

的z-index

iPhone /移动版网站上的z-index

1 个答案: