Question

我的专题文章的标题通过CSS定位，但结果并未在每个屏幕上正确显示。

我尝试将“ mvp-feat2-main-text”元素放置在“ mvp-feat2-main左相对”之前。

问题：图像后面显示文本。我需要文本显示在图像顶部。

有关可视化的信息，请访问我的网站：http://initivm.net/

以下是相关代码：

<section id="mvp-feat2-wrap" class="left relative">

<?php global $do_not_duplicate; global $post; $recent = new WP_Query(array( 'tag' => get_option('mvp_feat_posts_tags'), 'posts_per_page' => '1'  )); while($recent->have_posts()) : $recent->the_post(); $do_not_duplicate[] = $post->ID; ?>

<div class="mvp-feat2-main left relative">

    <a href="<?php the_permalink(); ?>" rel="bookmark">

    <div class="mvp-feat2-main-img left relative">

        <?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { ?>

            <?php the_post_thumbnail('mvp-post-thumb', array( 'class' => 'mvp-reg-img' )); ?>

            <?php the_post_thumbnail('mvp-mid-thumb', array( 'class' => 'mvp-mob-img' )); ?>

        <?php } ?>

        <?php if ( has_post_format( 'video' )) { ?>

            <div class="mvp-feat-vid-but">

                <i class="fa fa-play fa-3"></i>

            </div><!--mvpfeat-vid-but-->

        <?php } else if ( has_post_format( 'gallery' )) { ?>

            <div class="mvp-feat-gal-but">

                <i class="fa fa-camera fa-3"></i>

            </div><!--mvpfeat-gal-but-->

        <?php } ?>

    </div><!--mvp-feat2-main-img-->

    <div class="mvp-feat2-main-text">

        <h3 class="mvp-feat2-main-cat left"><span class="mvp-feat2-main-cat left"><?php $category = get_the_category(); echo esc_html( $category[0]->cat_name ); ?></span></h3>

        <div class="mvp-feat2-main-title left relative">

            <?php if(get_post_meta($post->ID, "mvp_featured_headline", true)): ?>

                <h2><?php echo esc_html(get_post_meta($post->ID, "mvp_featured_headline", true)); ?></h2>

            <?php else: ?>

                <h2 class="mvp-stand-title"><?php the_title(); ?></h2>

            <?php endif; ?>

        </div><!--mvp-feat2-main-title-->

        <div class="mvp-feat1-info">

            <span class="mvp-blog-author"><?php esc_html_e( 'By', 'click-mag' ); ?> <?php the_author(); ?></span><span class="mvp-blog-date"><i class="fa fa-clock-o"></i><span class="mvp-blog-time"><?php the_time(get_option('date_format')); ?></span></span>

        </div><!--mvp-feat1-info-->

    </div><!--mvp-feat2-main-text-->

    </a>

</div><!--mvp-feat2-main-->

Answer 1

尝试使用

style="z-index:value">

在您的html上，然后在结尾处将元素显示在图像的顶部

示例：

<div class="mvp-feat2-main-text" style="z-index:99;">

z-index的值必须大于图像的z-index，因此请尝试增加该值，直到它出现在顶部。

在图像上移动元素？

1 个答案: