Z-index not applying on :hover for flex elements

Question

I have two side by side divs. The right div is set to expand on hover and display a message. I have set the z-index on the expanding div to be z-index: 1 and the left div and all its children to be z-index: 0, however the expanding div will only expand as far as the text in the div beside it.

I have read multiple questions here about z-index and flex items but can't work out what I am doing wrong. I have added a higher z-index to my first flex-item as described here Z-index doesn't work with flex elements? but that has not fixed it.

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

Does this answer your question? [Z-index doesn't work with flex elements?](https://stackoverflow.com/questions/45398088/z-index-doesnt-work-with-flex-elements) — ronen, Nov 17 '19 at 07:33
Unfortunately not, I have a higher z-index on my first flex item but it still is not working. — S.Gou, Nov 17 '19 at 07:39
what is not working exactly? what should happen on hover: https://jsfiddle.net/nao87vLc/ ? — Temani Afif, Nov 17 '19 at 08:10
The div on the right should expand to the left and over the div and text on the left. — S.Gou, Nov 17 '19 at 08:31
this is not a z-index issue. Make the right element position:absolute so it can go above the left one — Temani Afif, Nov 17 '19 at 08:40

sina_r · Accepted Answer · 2019-11-17T09:41:10.983

Z-Index is not the issue here. You can set the position to absolute so the right div goes over the left on hover. This code works:

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

score 0 · Answer 2 · answered Nov 17 '19 at 09:05

This is not a z-index issue. It is a width issue. When the element expands the other element still occupies part of the width and therefore the expanding element stops.

You can add flex-shrink: 1 to the left element for the effect to take place. Also, you can set different position. Or you can use 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>

Αntonis Papadakis · Answer 3 · 2019-11-17T10:10:21.450

As mentioned in the comments above, you can make inner right div position: absolute with parent div position relative.

Check the snippet:

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

Z-index not applying on :hover for flex elements

3 Answers3