悬停在使用位置的按钮上不起作用：绝对？

我试着用z-index在着陆页上的标题/按钮的背景中放置一个图像（因为我使用的是背景颜色来创建叠加层），但是我无法让它工作，直到我将标题/按钮作为绝对。现在这些按钮（显然需要点击）不能被搁置或选择。悬停在使用位置的按钮上不起作用：绝对？

着陆页被分成两部分，我没有将背景图片放在下半部分，按钮悬停很好，但在上半部分我留下了背景图片，我无法将鼠标悬停在按钮上。如果您找到解决方案，请解释我是如何误解的。

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

<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>

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
    font-family: Antonio; 
} 

#landing-page { 
    text-transform: uppercase; 
} 

nav { 
    width: 100%; 
    position: absolute; 
} 

button { 
    font-family: Antonio; 
    text-transform: uppercase; 
} 

#top-half { 
    height: 340px; 
    background: rgb(27, 40, 57); 
    color: rgb(240, 202, 0); 
    overflow: hidden; 
} 

#top-half header { 
    width: 50%; 
    height: 340px; 
    overflow: hidden; 
    margin-left: 25%; 
    margin-top: 5%; 
    text-align: center; 
    position: absolute; 
} 

#top-half img { 
    width: 100%; 
    opacity: 0.1; 
} 

#landing-page header h1 { 
    font-weight: 100; 
    font-size: 500%; 
    letter-spacing: 5px; 
} 

#landing-page header h2 { 
    font-size: 23; 
    font-weight: 400; 
    letter-spacing: 3px; 
    opacity: 0.7; 
} 

#about-btn { 
    border: 5px solid rgb(240, 202, 0); 
    padding: 5px 40px; 
    color: rgb(240, 202, 0); 
    letter-spacing: 4px; 
    margin-top: 5%; 
} 

#about-btn:hover { 
    color: rgb(27, 40, 57); 
    background: rgb(240, 202, 0); 
} 

#contact { 
    padding: 5px 40px; 
    color: rgb(240, 202, 0); 
    border: 3.5px solid rgb(240, 202, 0); 
    border-radius: 25px; 
    font-weight: 100; 
    letter-spacing: 3px; 
    text-align: center; 
    font-size: 15px; 
    margin-left: 87%; 
    margin-top: 1.1%; 
} 

#contact:hover { 
    color: rgb(27, 40, 57); 
    background: rgb(240, 202, 0); 
} 

#bottom-half { 
    height: 340px; 
    background-color: rgb(255, 246, 222); 
    color: rgb(27, 40, 57); 
} 

#bottom-half header { 
    position: absolute; 
    width: 60%; 
    margin-left: 24.8%; 
    margin-top: 7%; 
} 

#bottom-half header h3 { 
    font-size: 50px; 
    font-weight: 100; 
    letter-spacing: 3px; 
} 

#bottom-half img { 
    height: 87%; 
    margin-left: 470.5px; 
    margin-top: 2.5%; 
    opacity: .1; 
} 

#work-btn { 
    border: 5px solid rgb(27, 40, 57); 
    padding: 5px 40px; 
    color: rgb(27, 40, 57); 
    letter-spacing: 4px; 
    margin-left: 29.7%; 
    margin-top: 3%; 
    font-weight: 400; 
} 

#work-btn:hover { 
    color: rgb(255, 246, 222); 
    background: rgb(27, 40, 57); 
} 

/* ☟ FINGER BOUNCE ☟ */ 

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -webkit-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -moz-transform: translateY(-20px); 
    -ms-transform: translateY(-20px); 
    -webkit-transform: translateY(-20px); 
    transform: translateY(-20px); 
    } 
    60% { 
    -moz-transform: translateY(-15px); 
    -ms-transform: translateY(-15px); 
    -webkit-transform: translateY(-15px); 
    transform: translateY(-15px); 
    } 
} 

#finger { 
    margin-top: -10%; 
    font-size: 35px; 
} 

#bounce { 
    -moz-animation: bounce 4s infinite; 
    -webkit-animation: bounce 4s infinite; 
    animation: bounce 4s infinite; 
} 


/* END FINGER BOUNCE */

来源

2016-04-23 Art

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

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

Updated Pen

来源

2016-04-23 16:01:17 Stickers

悬停在使用位置的按钮上不起作用：绝对？

回答

相关问题