iPad/iPhone上的z索引问题

Question

首先，我几乎没有CSS/HTML的经验，我不是一个网页设计师/程序员，基本上我不知道我在做什么。

我也快要自杀了，因为什么都没有用。我真的很感谢每一个想要帮助我的人。

当你打开pawelpietryka.com并将鼠标悬停在图片上时，它会通过webkit转到div中，基本上一切都会正常工作。

我还使用了一个webkit的插图阴影，它也是动画的。我对这个阴影有很大的问题，因为它总是出现在图像后面(而不是前面)……我用这些改变破解了它

#demo-5 img { z-index: -1; position: relative; vertical-align: top; }

当我输入z-index：-1；它在iPad/iPhone上不再起作用时，我轻敲容器，什么也没有发生。

(我假设它没有悬停状态，当我试图点击它时，它不知何故在主层后面。)

我在其他页面上看到过，理想的情况是: 1)第一个点击框中的幻灯片，2)第二个点击跳转到目的地。

谢谢!

Answer 1

如果你认为你的div嵌套是一个金字塔，比如...

<pyramid>
  <section level="1">
    <section level="2">
    </section>
  </section>
</pyramid>

您不能让level 2出现在level 1下，因为level 1包含level 2。如果您希望level 2出现在level 2之上，它们通常是同级，即

<pyramid>
  <section level="1"></section>
  <section level="2"></section>
</pyramid>

但在您的特定情况下，我建议将图像作为div的背景

<div id="boxes">
  <?php while ( have_posts() ) : the_post(); ?>
    <div class="box">
      <a href="<?php the_permalink(); ?>">
        <div class="rel" id="demo-5" style="background: transparent url(<?php the_post_thumbnail('homepage-thumb'); ?>) top left no-repeat">
          <div class="detailsausgeblendet">
            <h1><?php the_title(); ?></h1>
            <?php the_excerpt() ?>
          </div>
        </div>
      </a>
    </div>
  <?php endwhile; ?>
</div>

Answer 2

尝试在这里张贴，评论的格式很奇怪

<div id="boxes">
<?php while ( have_posts() ) : the_post(); ?>

    <div class="box">
        <a href="<?php the_permalink(); ?>"><div class="rel" id="demo-5" style="background-image:<?php the_post_thumbnail('homepage-thumb'); ?>">
                    <div class="detailsausgeblendet">
<h1><?php the_title(); ?></h1>
        <?php the_excerpt() ?>
                    </div>


    <?php endif ?>

        </div></a>
    </div>

<?php endwhile; ?>
</div>

Answer 3

这是“没变”的代码

<div id="boxes">
<?php while ( have_posts() ) : the_post(); ?>

    <div class="box">
        <div class="rel" id="demo-5">
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('homepage-thumb', array('alt' => '', 'title' => '')) ?></a>
    <?php if ($imbalance2_theme_options['images_only'] == 0): ?>

                    <a href="<?php the_permalink(); ?>"><div class="detailsausgeblendet">
<h1><?php the_title(); ?></h1>
        <?php the_excerpt() ?>
                    </div></a>


    <?php endif ?>

        </div>
    </div>