CSS position icon at top right of div, goes behind div - html

Question

I got a quick question. I want an icon at the top right of the div, and the bottom right. I think I am doing it well, but for some reason it goes behind the div.
Image of what happens, you can see the green and red icon not going above it, but behind
This is the code I wrote:
HTML:
<div v-if="showMenu" class="wrapper">
<!-- Begin karakters onderaan -->
<div v-if="karakters" class="karakters-wrapper">
<span v-for="karakter in karakters" :key="karakter">
<div v-if="karakter !== undefined" class="karakter-box">
<p>{{karakter.charinfo.firstname}} {{karakter.charinfo.lastname}}</p>
<i class="fas fa-play-circle icoon-speel"></i>
<i class="fas fa-trash icoon-verwijder"></i>
</div>
<div v-else class="karakter-box">
<p>Leeg karakter slot</p>
</div>
</span>
</div>
<div v-else>
<h1 style="color:#fff;font-size:48px;">GEDULD!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
</div>
<!-- Einde karakters onderaan -->
</div>
^^ Don't mind the v-if etc. that's from VueJS. Anyways, the div with class "karakter-box" is the div where I want an icon at the top right of.
CSS:
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
}
.karakters-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 10px;
}
/* Karakter boxjes */
.karakter-box {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 100px;
background-color: rgba(0, 0, 0, 0.7);
border-top: 8px solid var(--white);
padding: 5px;
margin: 5px;
color: var(--white);
transition: .25s ease-in-out;
}
.karakter-box:hover {
border-top: 8px solid var(--groen);
background-color: rgba(0, 0, 0, 0.9);
}
.icoon-speel {
position: absolute;
top: -10px;
right: -10px;
font-size: 2rem;
background-color: var(--groen);
color: var(--white);
padding: 10px;
border-radius: 100%;
}
.icoon-verwijder {
position: absolute;
bottom: -10px;
right: -10px;
font-size: 2rem;
background-color: var(--rood);
color: var(--white);
padding: 10px;
border-radius: 100%;
}```

Answer 1

I'm not sure why but it looks like there is an overflow: hidden karakter-box class.
even though i don't see it in the code sample you provided.
When i tested the code the sample this issue did not occur
Try Checking for css overflow on karakter-box

Answer 2

I suggest use another for the background and set its width to device width.
use this css code to get positions to right corners
Position: absolute;
and use this at css to get front of div
z-index:1;
index 1 is go front of styles and 2 3 4 going backward as ordered.

Answer 3

set the z-index of div to be -1
div{
z-index: -1;
}
and that of icons to be 1
i{
z-index: 1;
}
i will make the div behind your icons, so you can interact with your icons.