header.php中的透明导航

Question

如何在header.php中正确使用透明导航栏？如果导航栏包装在与主人公相同的div包装器中，并且每个页面都有一个由主人公div包装器类设置的不同的主人公图像( hero -1、hero-2、hero-3等)，那么将导航栏添加到header.php将意味着所有页面都有相同的主人公。这是因为英雄类将在导航栏所在的header.php中硬编码。

我该如何解决这个问题？我添加了一些基本的html来演示这个问题

​

<section class="hero-wrapper hero-1">
  <nav class="navbar">
    <div class="logo">
      logo here
    </div>
    <div class="nav-links">
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
    </div>
</section>

​

Answer 1

您可以尝试使用position: absolute设置导航栏的样式，并在其后面放入英雄包装器(在模板内)。

https://www.w3schools.com/css/css_positioning.asp