Z-index 不适用于 :hover 用于 flex 元素

Question

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

我在这里阅读了多个关于 z-index 和 flex 项目的问题，但无法弄清楚我做错了什么。如Z-index doesn't work with flex elements? 所述，我已经为我的第一个 flex-item 添加了更高的 z-index 但这并没有修复它。

.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>

Answer 1

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;
  }

Answer 2

这不是 z-index 问题。这是一个宽度问题。当元素扩展时，另一个元素仍然占据部分宽度，因此扩展元素停止。

您可以将flex-shrink: 1 添加到左侧元素以产生效果。此外，您可以设置不同的位置。或者你可以使用transform: translateX(-100%)。

.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;
  
  /* Add flex shrink */
  flex-shrink: 1;
}

.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>

Answer 3

如上面的 cmets 中提到的，您可以将内右 div position: absolute 与父 div position relative。

检查sn-p：

.container {
  display: flex;
  background-color: lightgray;
  height: 48px;
  width: 139px;
  border-radius: 4px;
  position: relative;
}

.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;
  background-color: red;
  border-radius: 0 4px 4px 0;
  overflow: hidden;
  transition: 0.3s;
  cursor: pointer;
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: calc(100% - 8px);
  width: 8px;
  padding: 5px;
  box-sizing: border-box;
}

.container .inner.right .info-msg {
  display: none;
  transition: 0.3s;
}

.container .inner.right:hover {
  left: 0;
  width: 100%;
  border-radius: 4px;
}

.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>