Question

正在为我的网站开发固定标题。它遍布整个地方。过去wordpress插件的任何事都让我困惑，哈哈。但我能够让它工作一半。在mozilla上，它看起来就像我想要的那样，但是在safari和chrome上它的关闭。以及页面上的视频与标题重叠。有什么建议吗？

的header.php：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title><?php ui::title(); ?></title>

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />

    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php ui::rss(); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php ui::head(); ?>

</head>
<body <?php body_class() ?>>
<script>
$("iframe").each(function(){
    var ifr_source = $(this).attr('src');
    var wmode = "wmode=transparent";
    if(ifr_source.indexOf('?') != -1) {
        var getQString = ifr_source.split('?');
        var oldString = getQString[1];
        var newString = getQString[0];
            $(this).attr('src',newString+'?'+wmode+'&'+oldString);
    }
    else $(this).attr('src',ifr_source+'?'+wmode);
});</script>

<div id="header-fixed">
<div id="logo"><a href="http://ngaradio.org/"><img src="http://ngaradio.org/wp-content/uploads/2012/11/NewTop.png" alt="NGA Radio"></a></div>

    <div id="my-menus">
<div class="wrapper">
<?php if (option::get('menu_top_show') == 'on') { 
if (has_nav_menu( 'secondary' )) { 
wp_nav_menu( array('container' => '', 'container_class' => '', 'menu_class' => '', 'menu_id' => '', 'sort_column' => 'menu_order', 'depth' => '1', 'theme_location' => 'secondary' ) );
}
else
{
echo '<ul><li>Please set your Top Menu on the <a href="'.get_admin_url().'nav-menus.php">Appearance > Menus</a> page or disable it from the <a href="'.get_admin_url().'admin.php?page=wpzoom_options">WPZOOM Theme Options</a> page, General tab.</li></ul>';
}
} // if menu top show 
?>
<?php if (option::get('social_icons_show') == 'on') { ?>
<ul id="social-links">
<?php if (option::get('social_icons_facebook')) { ?><a href="<?php echo option::get('social_icons_facebook'); ?>" rel="external,nofollow"><img src="<?php bloginfo('template_url'); ?>/images/icons/ic_facebook.png" alt="" /></a> - <?php } ?>
<?php if (option::get('social_icons_twitter')) { ?><a href="<?php echo option::get('social_icons_twitter'); ?>" rel="external,nofollow"><img src="<?php bloginfo('template_url'); ?>/images/icons/ic_twitter.png" alt="" /></a> - <?php } ?>
<?php if (option::get('social_icons_youtube')) { ?><a href="<?php echo option::get('social_icons_youtube'); ?>" rel="external,nofollow"><img src="<?php bloginfo('template_url'); ?>/images/icons/ic_youtube.png" alt="" /></a> - <?php } ?>
<a href="<?php ui::rss(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/icons/ic_rss.png" alt="" /></a>
</ul><!-- end #social-links -->
<?php } ?></div>

<div id="player">
<iframe src="http://www.streamlicensing.com/stations/testing/fahq.html" style="border:0px #FFFFFF none;" name="NGA Radio" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="32px" width="500px"></iframe></div>
    </div>
</div>

<div id="container">

<!-- stat #pre-header -->

    <header id="header">
        <div class="wrapper">

            <!--  #logo -->

            <?php if (option::get('banner_header_enable') == 'on') { ?>
            <div class="header-banner">

                <?php if ( option::get('banner_header_html') <> "") { 
                    echo stripslashes(option::get('banner_header_html'));             
                } else { ?>
                    <a href="<?php echo option::get('banner_header_url'); ?>" rel="nofollow" title="<?php echo option::get('banner_header_alt'); ?>"><img src="<?php echo option::get('banner_header'); ?>" alt="<?php echo option::get('banner_header_alt'); ?>" /></a>
                <?php } ?>          

            </div><!-- end .header-banner -->
            <?php } ?>

            <div class="cleaner">&nbsp;</div>

        </div><!-- end .wrapper -->

        <nav id="header-menu">

            <div class="wrapper">

                <?php if (has_nav_menu( 'primary' )) { 
                    wp_nav_menu( array('container' => '', 'container_class' => '', 'menu_class' => 'dropdown', 'menu_id' => 'main-menu', 'sort_column' => 'menu_order', 'theme_location' => 'primary' ) );
                }
                else
                {
                    echo '<p>Please set your Main Menu on the <a href="'.get_admin_url().'nav-menus.php">Appearance > Menus</a> page. For more information please <a href="http://www.wpzoom.com/documentation/morning/">read the documentation</a>.</p>';
                }
                ?>

            </div><!-- end .wrapper -->

        </nav>

    </header><!-- end header -->
<p></p><p></p><p></p><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <section id="main">

CSS：

#header-menu {
    position: fixed;
    top: 114px;
    margin: auto;
    left: 150px;
    z-index: 100;
    opacity: .8;
}

#logo {
    position: fixed;
    top: -40px;
    margin: auto;
    left: 0;
    z-index: 1;
}

#social-links {
    position: fixed;
    top: 156px;
    right: 50px;
    margin: auto;
    z-index: 1000;
    width: 100%;
}

#player {
    position: fixed;
    top: 108px;
    left: -210px;
    margin: auto;
    z-index: 10000;
    width: 100%;
}

非常感谢任何帮助......

网站位于http://ngaradio.org

Answer 1

这绝对是因为CSS中的z-index。给你想要它的元素提供更高的数字:)多次面对类似的问题。如果您希望标题位于顶部，则始终为CSS中的标题提供比视频或其他任何内容更高的z-index数字。您为视频提供10000，为标题提供100。因此效果。

修复固定标题

1 个答案: