выпуск z-index на iPad / iPhone

Question

Прежде всего, у меня очень мало опыта работы с CSS / HTML, я не веб-дизайнер / программист, по сути, я понятия не имею, что я делаю.

Я тоже близок к тому, чтобы покончить с собой, потому что ничего не помогло. Я действительно ценю всех, кто пытается мне помочь.

Когда вы заходите на pawelpietryka.com и наводите курсор на изображение, оно скользит в div через переход webkit, и в основном все работает.

Я также использую тень от веб-набора, которая тоже анимирована. У меня были большие проблемы с этой тенью, потому что она всегда появлялась позади изображения (не спереди) ... Я взломал ее с этими изменениями

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

Как только я поставлю z-index: -1; это больше не работает на iPad / iPhone, я нажимаю на контейнер, и ничего не происходит.

(я предполагаю, что у него нет состояния при наведении, и когда я пытаюсь коснуться его, это как-то ЗА ГЛАВНЫМ слоем.)

Я видел это на другой странице, и идеальным сценарием было бы: 1) Первое окно касания вставляется 2) Второе нажатие - переход к месту назначения.

Спасибо!

Answer 1

Если вы думаете о своем вложении в пирамиду, например ...

<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>