Z索引不适用于Flex元素的：hover

debugcn 发表于 Dev

S.Gou

我有两个并排的div。右边的div设置为在悬停时展开并显示一条消息。我将扩展div的z-index设置为z-index: 1，将左div及其所有子级设置为z-index: 0，但是扩展div只会扩展到其旁边div中的文本。

我在这里阅读了有关z-index和flex项目的多个问题，但无法解决我做错了什么。我在第一个flex-item中添加了更高的z-index，如此处所述Z-index对flex元素不起作用？但这并没有解决。

.container {
  display: flex;
  background-color: lightgray;
  height: 48px;
  width: 139px;
  border-radius: 4px;
}
.container .inner {
  height: 48px;
}
.container .inner > div {
  display: flex;
  z-index: 0;
}
.container .inner.left {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  padding-left: 10px;
  justify-content: center;
}
.container .inner.right {
  display: flex;
  flex: 0 1 8px;
  background-color: red;
  border-radius: 0 4px 4px 0;
  overflow: hidden;
  transition: 0.3s;
  cursor: pointer;
  z-index: 1;
}
.container .inner.right .info-msg {
  display: none;
  transition: 0.3s;
}
.container .inner.right:hover {
  flex: 0 1 150px;
}
.container .inner.right:hover .info-msg {
  display: flex;
}

<div class="container">
  <div class="inner left">
    <div class="time">9:00am - 5:00pm</div>
    <div class="name">Worker</div>
  </div>
  <div class="inner right">
    <div class="info-msg">Message</div>
  </div>
</div>

sina_r

Z-Index不是这里的问题。您可以将位置设置为绝对，以便将右div悬停在左侧。此代码有效：

.container {
    height: 48px;
    width: 139px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: lightgray;
    border-radius: 4px;
  }


.inner {
    padding-left: 10px;
  }

.right {
    height: 48px;
    width: 8px;
    position: absolute;
    right: 0px;
    display: flex;
    align-items: center;
    background-color: red;
    border-radius: 0 4px 4px 0;
    transition: 0.7s;
    cursor: pointer;
  }

.right:hover {
    width: 129px;
    border-radius: 4px;
  }

.info-msg {
    overflow: hidden;
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。