Question

我需要将导航栏放在标题图片上方。我不能在CSS中使用背景url属性，因为我有不同页面的多个导航栏和标题图像。我希望导航向右浮动，使其偏移到图像，但部分覆盖在图像上。

            Button 1 | Button 2 | Button 3 | Button 4
Header Image

我尝试了很多方法，例如将它们放在相同的div上，并在图像上使用CSS position绝对值。这种情况导航停止工作。当我在导航上使用绝对位置时，我无法将导航向右移动得足够远（右：200px）不能再移动了！有没有人知道如何达到如上所述的预期结果？提前致谢！ HTML PHP

<div id="navigation-container">

 <nav id="np-access" role="navigation">
   <?php if ( (is_page(20) || is_page(22) || is_page(24) || is_page(26) ||    is_page(28)) ) { 
        wp_nav_menu( array( 'theme_location' => 'third') );
   }else{
        wp_nav_menu( array( 'theme_location' => 'secondary') );
   }
?>
 </nav>
</div>

<?php if ( (is_page(20) || is_page(22) || is_page(24) || is_page(26) || is_page(28)) )    { 
    echo '<img src="<path ito image" width="194" height="166"/>';
}
else{
   echo '<img src="<path ito image" width="194" height="166"/>';
}
?>

目前图像没有设置样式，因为它处于我需要的位置。

导航CSS

#np-wedding-nav{
  float: right;
  padding-right: 100px;
  height: 40px;
  position: relative;
}

Answer 1

我希望导航向右浮动，使其偏移到图像，但部分覆盖在图像上。

给导航带来负余量：

nav {margin-left: -100px}

或者位置相对：

nav {position: relative; left: -100px}

在任何情况下：更改标记中导航和图像的顺序。

Answer 2

请更改标题的顺序和您的 html 文件的导航，它应该可以工作。

CSS需要将导航栏放在图像上

2 个答案: