谷歌浏览器 - 绝对定位DIV上的Z-index问题

问题描述：

因此，我有一个“正在开发”的网站，我在谷歌浏览器中看到一个奇怪的问题（边缘/ Internet Explorer未显示此错误，但按预期工作，这是第一个！）谷歌浏览器 - 绝对定位DIV上的Z-index问题

循环浏览标题图片的两个“Next”和“Previous”控件的z-index为666，左右浮动，但似乎Google Chrome并未检测到a）悬停事件，b）点击（据我所知）。我不知道这是否与标题底部的菜单有关...

任何帮助将不胜感激！

CSS代码如下：

#header #coverControls-prev, 
#header #coverControls-next { 
    position: relative; 
    height: 100%; 
    width: 100px; 
    background-color: rgba(0,0,0,0.0); 
    opacity: 0.25; 
    text-align: center; 

    transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out; 
    z-index: 666; 
} 

#header #coverControls-prev:hover, 
#header #coverControls-next:hover { 
    background-color: rgba(0,0,0,0.25); 
    opacity: 1; 
} 

#header #coverControls-prev { 
    float: left; 
    clear: none; 
} 

#header #coverControls-next { 
    float: right; 
    clear: none; 
} 

#header #coverControls-prev p, 
#header #coverControls-next p { 
    display: block; 
    position: absolute; 
    top: 50%; 
    margin-top: -50%; 

    width: 100%; 

    font-size: 10vmin; 
    text-align: center; 
    z-index: 667; 
} 

#menu { 
    position: absolute; 
    bottom: 0; 
    left: 0; 

    display: block; 

    padding: 5px 2vw; 
    height: 3em; 
    width: 100vw; 

    background-color: rgba(255,255,255,0.5); 
    text-align: left; 
    white-space: nowrap; 
    overflow: hidden; 
    color: #000000; 

    z-index: 777; 
}

网站的问题：http://dev1.deliriousdreams.co.uk/

尝试显示：块上的元素 – Giri

@Giri - 在Chrome中的开发工具中添加此似乎不能解决问题。我在工作，所以目前无法直接编辑网站进行测试。我已经添加了网址，以便您可以看到完整的内容。 – Delirious

答

这在CSS添加到您的一个标签。您的锚标签需要宽度和高度。并且display:block允许您为锚标记添加宽度和高度。

width: 100px; 
height: 100px; 
display: block;

谷歌浏览器 - 绝对定位DIV上的Z-index问题

相关推荐