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>

您无法让级别 2 出现在级别 1 下，因为级别 1包含级别 2。如果您希望级别 2 出现超过 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>