Question

我正在尝试创建一个在悬停时显示更多文本的div，并让显示的文本居中。我有两个部分工作，但由于某种原因，z-index不起作用。

.popup-title-side {
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    font-family: Gamecube;
    font-size: 6px;
    color: #f00;
    line-height: 13px;
    cursor: default;
    z-index: 1001;
    background-color: #888;
}

.popup-body-side {
    letter-spacing: 1px;
    padding-top: 1px;
    text-transform: uppercase;
    font-family: Gamecube;
    font-size: 6px;
    line-height: 10px;
    text-align: center;
    color: #000;
    position: relative;
    top: 50%;
    z-index: 1000;
    /*min-height: 200px;*/
  	-webkit-transform: translateY(-50%);
  	    -ms-transform: translateY(-50%);
  	        transform: translateY(-50%);
}

这是我正在使用的代码但由于某种原因，.popup-body-side显示在.popup-title-side

之上

View the issue here

编辑我不明白导致这个问题被标记为重复的其他答案，我没有意识到这意味着你必须有一个位置标记。对不起。

Answer 1

要使z-index正常工作，您需要为元素添加定位。不要问为什么，我不知道。

这应该让你想要你正在寻找。请注意，我在其中添加了position: relative;。

Further reading

.popup-title-side {
    position: relative;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    font-family: Gamecube;
    font-size: 6px;
    color: #f00;
    line-height: 13px;
    cursor: default;
    z-index: 1001;
    background-color: #888;
}

.popup-body-side {
    position: relative;
    letter-spacing: 1px;
    padding-top: 1px;
    text-transform: uppercase;
    font-family: Gamecube;
    font-size: 6px;
    line-height: 10px;
    text-align: center;
    color: #000;
    position: relative;
    top: 50%;
    z-index: 1000;
    /*min-height: 200px;*/
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

Answer 2

您需要添加相对定位。将其添加到.popup-title-side

position: relative;

Answer 3

如果没有position:relative, position:fixed or position:absolute属性集

，则Z-index不起作用

Answer 4

你应该给.popup-title-side position:relative，position:absolute或position:fixed

z-index似乎无法正常工作

4 个答案: