Question

我对网页布局有了一个好主意，并开始设计然后对其进行编码。当我完成菜单时，我想到了YIHA！但过了一会儿，我发现即使它有更高的z-index，页面顶部的.menu-item也会落后于我的.logo类。

这是一个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-tricks，但我仍然没有按照我想要的方式工作。帮助我stackoverflooooow，你唯一的希望...

Answer 1

我猜你的问题是这样的：

.menu-box的{{1}}为20。

z-index的{{1}}为40。

两者都有.logo-box因此，这两者中的所有内容都将仅在两者内部“分层”。 z-index中的任何内容都不会高于position: relative;，因为我在上面提到的那些.menu-box。其中的所有内容都只在这两个父框内“分层”，内部元素的.logo-box只会在父元素内部生效。

我也会在此留下：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

CSS Z-Index分层问题

1 个答案: