Z-Index Doesn't Work with Flex Elements

Flexbox, z-index & position: static: Why isn't it working?

Like you wrote in your question, elements do not need to be positioned for z-index to work in a flex container.

Flex items can participate in a z-index stacking order even with position: static, which is not true for other CSS box models (except Grid) where z-index only works on positioned elements.

4.3. Flex Item Z-Ordering

Flex items paint exactly the same as inline blocks, except
that order-modified document order is used in place of raw document
order, and z-index values other than auto create a stacking context
even if position is static.

The reason z-index isn't working in your code is that div.header and div.core are not flex items. They are children of body, but body is not a flex container.

In order for z-index to work here, you'll need to apply display: flex to body.

Add this to your code:

body {
    display: flex;
    flex-direction: column;
}

Revised Demo

More details: https://stackoverflow.com/a/35772825/3597276

Z-index not applying on :hover for flex elements

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

z-index not working in a flex container

In your CSS, the .overlay class establishes a background image on the parent element.

In your HTML, the img element places an image as a child of the .overlay parent.

Per the rules of z-index stacking contexts, a child cannot appear behind the parent. Therefore, the background image (parent) cannot appear in front of the img (child).

That's why your img is always out front, irrespective of z-index.

But there is an easy solution to this problem. Use an absolutely-positioned pseudo-element:

.flex-container {  display: flex;  flex-wrap: wrap;  justify-content: center;  align-items: center;}
.flex-item {  margin-right: 50px;  margin-bottom: 50px;  flex: 0 0 15em;  border: 2px solid red;  min-height: 100px;  display: flex;  flex-direction: column;  position: relative;}
img {  width: 100%;  min-height: 0; /* https://stackoverflow.com/q/36247140/3597276 */}
.overlay::after {  background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;  width: 100%;  height: 100%;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  position: absolute;  background-size: contain;  opacity: 0.6;  content: "";}

<div class="flex-container">  <div class="flex-item overlay">    <img src="http://7bna.net/images/home-images/home-images-0.jpg" />  </div>  <div class="flex-item"></div>  <div class="flex-item"></div></div>

.container {
  display: flex;
  background: #eee;
  margin-top: 5%;
  height: 100px;
}

.container .flex-item {
  flex: 0 0 1;
  width: 25%;
  height: 80px;
  margin: 10px;
  position: relative;
  background: #ccc;
}

.container .flex-item .widget {
  width: 70px;
  height: 70px;
  background-color: #004990;
  border-radius: 50%;
  position: absolute;
  top: -35px;
  right: -35px;
  z-index:1;
}

<div class="container">
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>  
</div>