Question

我尝试使用z-index将图像放置在背景中（因为我使用背景颜色创建叠加层）标题/按钮在目标网页上，但我找不到工作直到我定位标题/按钮是绝对的。现在无法悬停或选择按钮（显然需要点击）。

着陆页被分成两半，我没有将背景图像放在下半部分，按钮徘徊不错，但在上半部分我离开了背景图像，我无法将鼠标悬停在按钮上。如果你找到解决方案，请解释我是如何误解的。

http://codepen.io/levane/pen/NNBOdM?editors=1100

{% for category in site.categories %}

  {% assign categoryName = category | first %}

    <li>
      <a href="#" 
         class="dropdown-toggle {% if page.category == categoryName %} active{% endif %}" 
         data-toggle="dropdown" 
         name="{{ categoryName }}">{{ categoryName }}</a>
    ...

<body>
    <section id="landing-page">
      <nav>
        <button id="contact">Contact</button>
      </nav>
      <div id="top-half">
        <header>
          <h1>Artemis Levane</h1>
          <h2>Web Designer & Front-End Developer</h2>
          <button id="about-btn">Who I Am</button>
        </header><img src="https://images.unsplash.com/photo-1442328166075-47fe7153c128?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;s=e18fcc3c0c7149c8ce315a176be812f0"/>
  </div>
  <div id="bottom-half">
    <header>
      <h3>Helping businesses & individuals bring their brands to the web</h3>
      <button id="work-btn">What I Do</button>
    </header><img src="/Personal/Images/Logo.png"/><br/>
    <div id="bounce">
      <button id="finger">☟</button>
    </div>
  </div>
</section>

Answer 1

您可以通过设置更高的z-index值来增加堆叠顺序。

nav {
  ...
  position: absolute;
  z-index: 1;
}
#top-half header {
  ...
  position: absolute;
  z-index: 1;
}

<强> Updated Pen

Hover使用position：absolute赢得了按钮的工作？

1 个答案: