CSS Z-Index分层问题

我对网页布局有了一个好主意，并开始设计然后编码。当我完成菜单时，我想到了YIHA！但是过了一会儿，我注意到即使页面顶部的.menu项目具有更高的Z-index，它也会在我的.logo类后面。CSS Z-Index分层问题

这里是一个SASS缺口：

li.menu-item 
     list-style: none 
     position: absolute 
     z-index: 200 

     &:hover > a 
     background-color: #a82929 
     box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5) 
     margin-right: 0px 

     a 
     text-decoration: none 
     color: #ffffff 
     box-sizing: border-box 
     padding: 0px 8px 0px 8px 
     margin-right: 22px 
     transition: all 0.4s ease-in-out 
     position: relative 
     z-index: 300

Link to the CodePen

试图观看有关z-index的一些影片，在他们之中一个从CSS-的招数，但我仍然不明白这一点以我想要的方式工作。帮我stackoverflooooow，你我唯一的希望......

来源

2015-08-30 Robban

请在问题中包含一个可重复的例子。这将包括HTML也和编译的CSS我猜。但无论如何，看看这个：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ – Roope

你是如何意味可重复的例子。我只包含一段代码，否则我无法链接到codepen。没有真正理解为什么我必须在这里包含代码来链接到codepen，代码是在那里？大部分时间让人们理解他们必须使用整个sass代码的问题，否则你不会获得上下文。我是否应该在我的问题中包含整个200多行的sass？加上玉石和js？ – Robban

Codepen会发生什么事？那么这个问题及其答案可能对任何人都没有帮助。 Stack Overflow不愿意依赖外部团体，所以一个完整的_但最小化的例子应该始终在问题本身。看看这个：http://stackoverflow.com/help/mcve – Roope

我猜你的问题是这样的：

.menu-box有z-index的20

.logo-box有z-index的40

而且两者都有position: relative;因此，这两者中的所有内容都将单独在两者内部“分层”。 .menu-box中的任何内容都不会超过.logo-box，因为我上面提到了那些z-index。这些内部的所有内容都将仅在这两个父框中“分层”，内部元素的z-index也只会在父元素内部发生变化。

我也将这里留在这里：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

来源

2015-08-30 18:27:23 Roope

所以你说的是，它的编码方式现在的菜单项不能越过标志？但是你写道，他们都有相对位置，但菜单框的位置是绝对的，logo-box有相对的位置，他们有不同的父母，所以我必须重写一下代码才能使它工作呢？无赖。感谢您的链接，将看看它。 – Robban

@Robban对，他们两个都没有'position：relative;'，对不起。但无论如何，我所说的仍然主要适用，所以花点时间了解'z-index'是如何工作的，这个链接应该对你有很大的帮助。尤其要注意'z-index'对于整个文档不是通用的，你需要弄清楚你设置的位置是如何影响它的范围的。 – Roope

是的，你是我的亲爱的朋友。只是想知道，如果它有任何区别，如果其中一个相对。但是，我非常感谢你的回答让我解决了这个问题。我不得不在同一父母中移动'nav'，然后工作。我很感激你花时间为我的问题写出了这样一个很好的答案，让我觉得有点不仅仅给了我答案，有时候这是需要的，但这次不是。如果是像你说的那样，你可以在不同的父母中使用相同的z-索引，因为它只适用于父母？ – Robban

CSS Z-Index分层问题

回答

相关问题