Html Z索引未应用于：悬停在flex元素上

我有两个并排的沙发。右div设置为悬停时展开并显示消息。我已经将扩展div上的z-index设置为

z-index:1

，将左div及其所有子div设置为

z-index:0

，但是扩展div只能扩展到其旁边div中的文本

我在这里读了很多关于z-index和flex项目的问题，但我不知道我做错了什么。我已经在我的第一个flex项目中添加了一个更高的z索引，如这里所述，但这并没有修复它

.container{
显示器：flex；
背景颜色：浅灰色；
高度：48px；
宽度：139px；
边界半径：4px；
}
.集装箱{
高度：48px；
}
.container.inner>div{
显示器：flex；
z指数：0；
}
.容器.内部.左侧{
显示器：flex；
弯曲方向：立柱；
弹性：10自动；
左侧填充：10px；
证明内容：中心；
}
.容器.内部.右侧{
显示器：flex；
flex:018px；
背景色：红色；
边界半径：0 4px 4px 0；
溢出：隐藏；
过渡：0.3s；
光标：指针；
z指数：1；
}
.container.inner.right.info消息{
显示：无；
过渡：0.3s；
}
.容器.内部.右侧：悬停{
flex:01150px；
}
.container.inner.right:hover.info msg{
显示器：flex；
}

上午9:00-下午5:00
工人
消息

这不是z索引问题。这是一个宽度问题。当元素展开时，另一个元素仍占据部分宽度，因此展开元素停止

您可以在左侧元素中添加

flex-shrink:1

，以产生效果。此外，您还可以设置不同的位置。或者您可以使用

transform:translateX（-100%）

.container{
显示器：flex；
背景颜色：浅灰色；
高度：48px；
宽度：139px；
边界半径：4px；
}
.集装箱{
高度：48px；
}
.container.inner>div{
显示器：flex；
z指数：0；
}
.容器.内部.左侧{
显示器：flex；
弯曲方向：立柱；
弹性：10自动；
左侧填充：10px；
证明内容：中心；
/*添加弹性收缩*/
弹性收缩：1；
}
.容器.内部.右侧{
显示器：flex；
flex:018px；
背景色：红色；
边界半径：0 4px 4px 0；
溢出：隐藏；
过渡：0.3s；
光标：指针；
z指数：1；
}
.container.inner.right.info消息{
显示：无；
过渡：0.3s；
}
.容器.内部.右侧：悬停{
flex:01150px；
}
.container.inner.right:hover.info msg{
显示器：flex；
}

上午9:00-下午5:00
工人
消息

Z索引不是这里的问题。您可以将位置设置为绝对，以便右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;
  }

---

如上所述，您可以使用父div

position relative

设置内部右div

position:absolute

检查代码段：

.container{
显示器：flex；
背景颜色：浅灰色；
高度：48px；
宽度：139px；
边界半径：4px；
位置：相对位置；
}
.集装箱{
高度：48px；
}
.container.inner>div{
显示器：flex；
z指数：0；
}
.容器.内部.左侧{
显示器：flex；
弯曲方向：立柱；
弹性：10自动；
左侧填充：10px；
证明内容：中心；
}
.容器.内部.右侧{
显示器：flex；
背景色：红色；
边界半径：0 4px 4px 0；
溢出：隐藏；
过渡：0.3s；
光标：指针；
z指数：1；
位置：绝对位置；
右：0；
排名：0；
底部：0；
左：计算（100%-8px）；
宽度：8px；
填充物：5px；
框大小：边框框；
}
.container.inner.right.info消息{
显示：无；
过渡：0.3s；
}
.容器.内部.右侧：悬停{
左：0；
宽度：100%；
边界半径：4px；
}
.container.inner.right:hover.info msg{
显示器：flex；
}

上午9:00-下午5:00
工人
消息

这是否回答了您的问题？不幸的是，我的第一个flex项目的z-索引较高，但它仍然不起作用。到底什么不起作用？悬停时应该发生什么：？右侧的div应该向左扩展，并覆盖div和左侧的文本。这不是z索引问题。使右元素位置：绝对，这样它就可以位于左元素的上方