关于CSS：如何使父元素出现在子元素上方


How to get a parent element to appear above child

本问题已经有最佳答案，请猛点这里访问。

我有两个嵌套的CSS元素。我需要使父级位于子元素的顶部，即z轴上方。仅设置z-index是不够的。

我不能在子级上设置负Z索引，而是将其设置为实际页面上页面容器下方。这是唯一的方法吗？

http://jsbin.com/ovafo/edit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.parent {
  position:  relative;
  width: 750px;
  height: 7150px;
  background: red;
  border: solid 1px #000;
  z-index: 1;
}
.child {
  position: absolute;
  background-color: blue;
  z-index: 0;
  color: white;
  top: 0;
}
.wrapper
{
  position: relative;
  background: green;
  z-index: 10;
}
1
2
3
    parent parent
   
      child child child

为子项设置一个负数z-index，并删除父项上的一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.parent {
    position: relative;
    width: 350px;
    height: 150px;
    background: red;
    border: solid 1px #000;
}
.parent2 {
    position: relative;
    width: 350px;
    height: 40px;
    background: red;
    border: solid 1px #000;
}
.child {
    position: relative;
    background-color: blue;
    height: 200px;
}
.wrapper {
    position: relative;
    background: green;
    height: 350px;
}

1
2
3
4
    parent 1 parent 1
        child child child
   
    parent 2 parent 2

https://jsfiddle.net/uov5h84f/

相关讨论

幸运的是，存在一个解决方案。您必须为父级添加一个package器，并将该package器的z-index更改为例如10，并将子级的z-index设置为-1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.parent {
    position: relative;
    width: 750px;
    height: 7150px;
    background: red;
    border: solid 1px #000;
    z-index: initial;
}

.child {
    position: relative;
    background-color: blue;
    z-index: -1;
    color: white;
}

.wrapper {
    position: relative;
    background: green;
    z-index: 10;
}
1
2
    parent parent
        child child child

相关讨论

其中一些答案确实有效，但是设置position: absolute;和z-index: 10;似乎很强大，只是为了达到所需的效果。我发现以下是所需要的，尽管不幸的是，我无法进一步减少它。

HTML：

1
            ...

CSS：

1
2
3
4
5
6
7
8
9
.wrapper {
    position: relative;
    z-index: 0;
}

.child {
    position: relative;
    z-index: -1;
}

我使用这种技术来实现图像链接的边框悬停效果。这里有更多代码，但是它使用上面的概念在图像顶部显示边框。

http://jsfiddle.net/g7nP5/

破解。基本上，发生的事情是，当您将z-index设置为负数时，它实际上会忽略父元素(无论是否定位)，并位于下一个定位的元素(在您的情况下是您的主容器)的后面。因此，您必须将父元素放在另一个已定位的div中，您的子div将位于该元素的后面。

解决这个问题对我来说是个救命稻草，因为我的代码无法正常工作，特别是无法定位我的父元素。

我发现所有这些对于实现此处指示的效果非常有用：仅使用CSS，将div悬停在

上时显示div

由于您的div是position:absolute，因此就位置而言它们实际上并不是嵌套的。在您的jsbin页面上，我将HTML中div的顺序切换为：

1
 

，红色框覆盖了蓝色框，我想这就是您要查找的内容。

您需要同时在父级和子级上使用position:relative或position:absolute才能使用z-index。

相关讨论

样式：

1
2
3
4
5
6
7
8
.parent{
  overflow:hidden;
  width:100px;
}

.child{
  width:200px;
}

身体：

1
 
相关讨论