CSS in React: Component disappearing when using position Absolute

Question

Talk people, good afternoon!

Next, I have a problem related to my css and I’m not able to solve. The problem occurs because in a <ul> i have 3 button icons(accept, cancel and edit), I want to put these 3 buttons on the top right side of each <ul>, but when I put position: absolute; he disappears with 2 buttons just getting the boot of cancel, when I change the position for relative he appears the 3 botões but it’s down there. Can anyone give me a boost? Follow the code below...

CSS

.profile-container ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 24px;
list-style: none;
}

.profile-container ul li {
    background: #FFF;
    padding: 24px;
    border-radius: 8px;
    position: relative;
}

.profile-container ul li button {
    display: inline-block;
    position: absolute;
    right: 24px;
    top: 24px;
    border: 0;
}

Front

return (
<div className="profile-container">
    <header>
        <img src={schoolIso} alt="school Isotipo" />
        <span>Bem vindo, {nameSchool}</span>

        <Link className="button" to="/">Eventos</Link>
        <button onClick={handleLogout} type="button">
            <FiPower size={18} color="#E02041" />
        </button>
    </header>

    <Tabs className="menu" >
        <Tab className="tab" label="Meus Dados" />
        <Tab className="tab" label="Professores" />
        <Tab className="tab" label="Cursos" />
        <Tab className="tab" label="Dashboard" />
        <Tab className="tab" label="Suporte" />
    </Tabs>

    <h1>Meus Dados</h1>
    <h1>Endereço</h1>
    <ul>
        {schools.map(school => (
            <li key={school.idSchool} >

                <strong>Nome da Instituição:</strong>
                <p contenteditable="true">{school.nameSchool}</p>

                <strong>CNPJ:</strong>
                <p>{school.cnpj}</p>

                <strong>Email:</strong>
                <p>{school.emailSchool}</p>

                <strong>Whatsapp:</strong>
                <p>{school.whatsappSchool}</p>

                <button type="button">
                    <FaEdit size={20} color="#a8a8b3" />
                </button>
                <button type="button">
                    <BiCheck size={20} color="#a8a8b3" />
                </button>
                <button type="button">
                    <BiX size={20} color="#a8a8b3" />
                </button>
            </li>
        ))}
        {schools.map(school => (
            <li key={school.idAdress}>

                <strong>Bairro:</strong>
                <p>{school.district}</p>

                <strong>Rua:</strong>
                <p>{school.street}</p>

                <strong>Número:</strong>
                <p>{school.number}</p>

                <strong>Complemento:</strong>
                <p>{school.complement}</p>

                <strong>CEP:</strong>
                <p>{school.cep}</p>

                <button type="button">
                    <FaEdit size={20} color="#a8a8b3" />
                </button>
                <button type="button">
                    <BiCheck size={20} color="#a8a8b3" />
                </button>
                <button type="button">
                    <BiX size={20} color="#a8a8b3" />
                </button>
            </li>
        ))}
    </ul>
</div>

);

Result with position: relative;

Result with position: Absolute;

Answer 1

It’s actually getting over each other, but everyone’s there! BiX which is the last btn to render stands over the others leaving them covered.

To solve there are several ways, but a very simple one would simply put a right in the btns that are covered using style={{ right: N }}

<button type="button">
    <FaEdit size={20} color="#a8a8b3" style={{ right: 40 }}/>
</button>
<button type="button">
    <BiCheck size={20} color="#a8a8b3" style={{ right: 20 }}/>
</button>
<button type="button">
    <BiX size={20} color="#a8a8b3" />
</button>