html - Logo 图像 float 在图像 slider 上 Wordpress 主题 CSS

Question

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

我正在做一个网站设计，我想让我的标志像漂浮在 Slider 层之上。我正在研究一个 wordpress 主题:

如您所见， Logo “Red Dela Cruz”位于顶部，占据了一个单独的空间或 div。我希望它在 slider 内并像一层一样漂浮在它上面，每当幻灯片更改图像时， Logo 应该仍然存在。这是我的代码:

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

Logo 在第二行，我没有在类里面做任何 css

web-logo

Answer 1

这应该有效:

.web-logo {
    position:absolute;
}

如果 Logo 在 slider “后面”，您应该添加一个 z-index，并使其更高，直到显示图像:

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