div 右上角的 CSS 位置图标，在 div 后面

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

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