徽标图像浮动在图像滑块 Wordpress 主题上 CSS

Question

免责声明：我没有对主题进行编码。这是另一位离开项目的开发人员所做的，我正在根据新的要求进行调整。我没有使用 Wordpress 主题的经验，但我可以理解代码。

我正在做一个网站设计，我想让我的标志像漂浮在滑块层上一样。我正在开发一个 wordpress 主题：

如您所见，徽标 'Red Dela Cruz' 在顶部，占据了单独的 space 或 div。我希望它在滑块内并像一层一样漂浮在它上面，每当幻灯片更改图像时，徽标应该仍然存在。这是我的代码：

       <div class="slider">
            <img src="<?php echo $template_path; ?>images/redlogo_website.png" alt="" class="web-logo"/>
            <div id="one-by-one-slider" class="one-by-one-slider">
                <ul class="one-by-one-slider-large">

                    <?php
                          $args = array(
                              'post_type' => 'rdc_home', 
                              );
                           query_posts( $args );
                           // The Loop
                          if ( have_posts() ) : 
                          while (have_posts()) :
                          //the post for declaration
                          the_post();
                    ?>

                    <li>
                        <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>" alt="<?php the_title(); ?>"/>
                        <div class="slider-content text-center">

                            <div class="slider-heading shp-12 slides" data-animation="bounceInDown" data-duration=4 data-delay=1>
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h1><?php the_title(); ?></h1>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="slider-heading shp-13 slides" data-animation="bounceInDown" data-duration=6 data-delay=2>
                                <div class=" container">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h3><?php the_content(); ?></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="slider-heading shp-14 slides" data-animation="bounceInUp" data-duration=8 data-delay=4>
                                <div class=" container">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <a href="#contact" class="btn lm-gallery btn-remore">For Bookings</a>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                        </div>
                    </li>
                    <?php 
                    endwhile;
                    endif;
                    wp_reset_query();
                    ?>

                </ul>
                <div class="one-by-one-slider-nav">
                    <ul class="one-by-one-slider-thumbs">
                        <li class="one-by-one-slider-element"></li>
                        <?php
                              $args = array(
                                  'post_type' => 'rdc_home', 
                                  );
                               query_posts( $args );
                               // The Loop
                              if ( have_posts() ) : 
                              while (have_posts()) :
                              //the post for declaration
                              the_post();
                        ?>
                            <li><a href="#"></a></li>
                        <?php 
                               endwhile;
                               endif;
                               wp_reset_query();
                        ?>

                    </ul>
                </div><!-- one-by-one-slider-nav -->  

            </div><!-- one-by-one-slider -->
        </div><!-- slider -->

徽标在第 2 行，我在 class

上没有做任何 css

web-logo

Answer 1

这应该有效：

.web-logo {
    position:absolute;
}

如果徽标 "behind" 滑块，您应该添加 z-index，并使其更高，直到图像显示：

.web-logo {
    position:absolute;
    z-index:2;
}

Answer 2

你可以试试这个：

.web-logo {
    position: absolute;
    right: 10px;
    top: 10px;
   z-index:2;
}