html - 文本链接不会有样式并且并不总是可点击的

Question

这个页面顶部的两个链接(“WORK”和“ABOUT”)弄得一团糟。

http://danux.me/

我不确定为什么我不能让它们成为样式。我似乎只能应用一个 float ，而 CSS 中的其他任何东西都没有做任何事情。

#nav_container {

float: right;
position: relative;
padding-right: 110px;
padding-top: 60px; 
}




#nav_container li {
float: left;  
display: inline;
color: #fff;
list-style: none;
text-decoration: none;
cursor: pointer;
}

就可点击部分而言，如果我展开浏览器，它们就会位于平铺图像的右侧，它们是可点击的。

我将平铺图像设置为相对重叠效果，并将蓝色条设置为绝对。

我为平铺图像设置了更高的 z-index，并尝试将更高的 z-index 应用于那些导航链接，认为我可以让它们弹出顶部并可点击，但没有骰子。

有什么猜测吗？

Answer 1

问题是您的 #home_console_wrapper 元素实际上与您的 #color_beam 重叠，并且上面有一个大的 padding-top 来隐藏它行为。它还具有更高的 z-index，这意味着它将使您的链接无法点击。

要纠正此问题，您需要从 #color_beam 中删除 position: absolute，并从 # 中删除 padding-top: 190px home_console_wrapper.

这将使您的链接变得可点击，而根本不会改变显示。

如果您仍然希望有轻微的“重叠”效果，只需在 #home_console_wrapper 上设置一个负的 margin-top:

#home_console_wrapper {
  margin-top: -35px;
}

希望对您有所帮助! :)