Html css定位滑块wordpress后的文本_Html_Css_Wordpress_Slider

Html css定位滑块wordpress后的文本

html css wordpress

Html css定位滑块wordpress后的文本,html,css,wordpress,slider,Html,Css,Wordpress,Slider,我需要一些帮助来定位我的css元素在wordpress主题中的位置。这是我的情况首先，我叫我的头。在我的标题中是我的水平导航菜单接下来，我从index.php调用我的滑块。滑块是以这样一种方式创建的，它占据了我屏幕宽度的100%，顶部空白为0。这样做可以使我的菜单位于我的滑块图像中我的问题是，我调用的下一个元素直接放在我的菜单下，但我希望它放在我的滑块图像下。我该怎么做？我是否必须给我的下一个元素一个等于滑块图像高度的边距顶部？似乎有更好的方法可以做到这一点滑块仅用于索引页，而不用于任何

我需要一些帮助来定位我的css元素在wordpress主题中的位置。这是我的情况

首先，我叫我的头。在我的标题中是我的水平导航菜单

接下来，我从index.php调用我的滑块。滑块是以这样一种方式创建的，它占据了我屏幕宽度的100%，顶部空白为0。这样做可以使我的菜单位于我的滑块图像中

我的问题是，我调用的下一个元素直接放在我的菜单下，但我希望它放在我的滑块图像下。我该怎么做？我是否必须给我的下一个元素一个等于滑块图像高度的边距顶部？似乎有更好的方法可以做到这一点

滑块仅用于索引页，而不用于任何子页

我在想也许正确的答案与职位标签有关，但我没有任何运气让功能发挥作用

这里是我的滑块定位css

.slider {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1500;
}

这是我的index.php文件

<?php get_header();?>

    <section>
        <?php get_template_part('slider', 'index');?>
    </section>

    <section>
        <div class="row">
            test
        </div>
    </section>

<?php get_sidebar();?>
<?php get_footer();?>

<div class="row full-width slider">
        <div class="preloader"></div>
        <ul class="example-orbit" data-orbit data-options="timer_speed: 6000; slide_number: false; pause_on_hover: false; animation:fade;">
            <?php
            $args = array('category_name' => 'Featured');
            $query = new WP_Query($args);
            while($query->have_posts()) : $query->the_post();
            ?>
                <li><?php the_post_thumbnail('featured');?>
                <div id="<?php echo get_post_meta($post->ID, 'caption', true);?>" class="orbit-caption"><?php the_excerpt();?></div>
                </li>
            <?php
                endwhile;
            ?>

        </ul>

        <div class="row shadow"><img src="<?php bloginfo('template_url');?>/img/bottom-shadow.png"></div>
    </div>


测验

这是我的头

<body>
    <header>

        <section>
            <div class="row">
                <nav class="top-bar" data-topbar>
                    <ul class="title-area">
                        <li class="name"><h1><a href="<?php echo get_option ('home');?>"><?php bloginfo('name');?></a></h1></li><li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                    </ul>
                <section class="top-bar-section">
                    <?php wp_nav_menu( array( 'main-menu' => 'Main Menu', 'container' => false, 'walker' => new Top_Bar_Walker(), 'menu_class' => 'right'));?>
                </section>
                </nav>
            </div>
        </section>

    </header>

这是我的slider-index.php文件

<?php get_header();?>

    <section>
        <?php get_template_part('slider', 'index');?>
    </section>

    <section>
        <div class="row">
            test
        </div>
    </section>

<?php get_sidebar();?>
<?php get_footer();?>

<div class="row full-width slider">
        <div class="preloader"></div>
        <ul class="example-orbit" data-orbit data-options="timer_speed: 6000; slide_number: false; pause_on_hover: false; animation:fade;">
            <?php
            $args = array('category_name' => 'Featured');
            $query = new WP_Query($args);
            while($query->have_posts()) : $query->the_post();
            ?>
                <li><?php the_post_thumbnail('featured');?>
                <div id="<?php echo get_post_meta($post->ID, 'caption', true);?>" class="orbit-caption"><?php the_excerpt();?></div>
                </li>
            <?php
                endwhile;
            ?>

        </ul>

        <div class="row shadow"><img src="<?php bloginfo('template_url');?>/img/bottom-shadow.png"></div>
    </div>




>嗨，汤姆，我想看看你的html代码。很可能您缺少一个清晰的div，并且您没有将绝对滑块div放在相对div中。如果可能，请共享您的html代码，以便我可以更正您缺少的代码。>谢谢，我把它添加到我原来的帖子里了。谢谢。我想让我搞砸的是在我应该使用相对时使用位置标签绝对。如果你使用绝对定位，那么给你的div一个固定的高度，否则在相对定位的情况下放置一个清晰的div ex./*css*/.clear{clear:两者；高度：1px；}/*html*/在包含滑块的部分之后。如果滑块中使用的图片高度相同，则滑块容器的固定高度在这种情况下适用。谢谢Rahul。我了解到，使用相对定位而不是固定将允许下一个元素加载到下面的适当位置。