images and text of a flexbox item overlapping absolute positioned div (tooltip) - css

Question

I'm using display: flex to create panels for my upgrade items. The code looks something like this, I tried to re-create it as best as I could: fidle
. Now I don't understand why are the images overlapping into the tooltip (hover over elements for tooltip to appear). This is very strange, I thought it was because of display: flex, so I tried doing the same thing using grid, no luck. The tooltip has to be position: absolute, especially because I'm planning on adding some javascript so the tooltip box follows the cursor. What is causing this kind of behavior? I'm thinking there's something to do with flexbox/grid and absolute positioning, but I'm not very good at css

Answer 1

Add a z-index value to the .tooltip class.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
p
{
font-size: 24px;
line-height: normal;
}
img
{
border: 1px solid grey;
vertical-align: middle;
}
/* Upgrade wrapper & body */
#upgrades {
height:100%;
box-shadow:0 0 16px 4px rgb(0, 0, 0);
}
.upgrade {
display: flex;
width: 320px;
height: auto;
margin: 1em;
position: relative;
box-shadow: 0 0 8px 2px rgb(0, 0, 0);
}
.upgrade-img {
width: 64px;
height: 64px;
}
.upgrade-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-basis: 100%;
padding: 0.5em;
}
/* Upgrade Hover Effects */
.upgrade:hover {box-shadow: 0 0 8px 2px rgb(0, 204, 255);}
.upgrade:hover .tooltip {display: initial;}
/* Tooltip */
.tooltip {
display: none;
width: 256px;
height: auto;
padding: 1em;
position: absolute;
top: 64px;
left: 0;
z-index: 100; /* <------- ADDED Z-INDEX */
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
box-shadow: 0 0 4px 1px rgb(0, 0, 0);
}
<div class="upgrade">
<div class="upgrade-img">
<img src="https://source.unsplash.com/random/64x64">
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ea sequi recusandae commodi necessitatibus voluptatum, labore libero quasi quos veniam eveniet laborum aspernatur harum iusto, provident itaque hic laboriosam unde!
</div>
</div>
<div class="upgrade-body">
<p>
<img src="https://source.unsplash.com/random/24x24">
100 (dmg)
</p>
<p>
<img src="https://source.unsplash.com/random/24x24">
500 (cost)
</p>
</div>
</div><div class="upgrade">
<div class="image">
<img src="https://source.unsplash.com/random/64x64">
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ea sequi recusandae commodi necessitatibus voluptatum, labore libero quasi quos veniam eveniet laborum aspernatur harum iusto, provident itaque hic laboriosam unde!
</div>
</div>
<div class="body">
<p>
<img src="https://source.unsplash.com/random/24x24">
100 (dmg)
</p>
<p>
<img src="https://source.unsplash.com/random/24x24">
500 (cost)
</p>
</div>
</div><div class="upgrade">
<div class="image">
<img src="https://source.unsplash.com/random/64x64">
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ea sequi recusandae commodi necessitatibus voluptatum, labore libero quasi quos veniam eveniet laborum aspernatur harum iusto, provident itaque hic laboriosam unde!
</div>
</div>
<div class="body">
<p>
<img src="https://source.unsplash.com/random/24x24">
100 (dmg)
</p>
<p>
<img src="https://source.unsplash.com/random/24x24">
500 (cost)
</p>
</div>
</div>