一直在为我的网站设计一个固定的标题。它无处不在。任何过去的 wordpress 插件都让我感到困惑，大声笑。但我能够让它工作一半。在 mozilla 上它看起来就像我想要的那样，但在 safari 和 chrome 上它关闭了。以及页面上的视频与标题重叠。有什么建议吗？
标题.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"> </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
最佳答案
肯定是因为CSS中的z-index。为您想要的元素提供更高的编号 :) 多次遇到类似的问题。如果您希望标题位于顶部，请始终为 CSS 中的标题提供比视频或其他任何内容更高的 z-index 数字。您为视频提供 10000，为标题提供 100。因此效果。
关于css - 修复固定 header ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15082362/