Как исправить проблему индексации в моем HTML с помощью CSS? ⇐ Html

[Anonymous]

Я пытаюсь создать компонент в реакции, где есть изображение анатомии тела, и на этом изображении есть имена и линии, указывающие на соответствующую часть тела, и когда вы нажимаете на имя, появляется окно с описанием этой части тела. все работает нормально, но когда окно открывается, уровень стека элементов неправильный, и кажется, что поток стека представляет собой изображение, контейнер описания и вверху имена и строки частей тела. В результате имя и строку другой части тела можно увидеть поверх контейнеров описания. Похоже, проблема с индексацией. Я пытался указать значения индекса, но, похоже, ничего не работает. Я хочу, чтобы в новом открывшемся окне были указаны названия следующих частей. в завершенном коде есть больше частей тела. Ребята, у вас есть идеи, как я могу решить эту проблему?
Я не включил код JS, поскольку он не имеет отношения к проблеме, поскольку проблема заключается в HTML и CSS.
Заранее спасибо.


Surgeries





bodyPartHandler('hair')}
>
Hair


Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis
unde at explicabo natus numquam reprehenderit saepe amet itaque
voluptate totam eum, aliquam non praesentium vitae magni quae
voluptatibus nostrum nisi.





bodyPartHandler('eyes')}
>
Eyes


Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Reiciendis unde at explicabo natus numquam reprehenderit saepe
amet itaque voluptate totam eum, aliquam non praesentium vitae
magni quae voluptatibus nostrum nisi.





bodyPartHandler('nose')}
>
Nose


Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Reiciendis unde at explicabo natus numquam reprehenderit saepe
amet itaque voluptate totam eum, aliquam non praesentium vitae
magni quae voluptatibus nostrum nisi.





CSS:
.anatomy-container {
margin: auto;
text-align: center;
position: relative;
max-width: 800px;
}

.line {
margin-top: 3rem;
background-color: rgba(76, 101, 245, 0.781);
height: 0.2rem;
}

.anatomy-image {
width: 100%;
height: auto;
}

.body-part {
position: absolute;
display: flex;
align-items: center;
height: 4%;
}

.arrow {
background-color: rgba(76, 101, 245, 0.781);
width: 100%;
height: 0.2px;
margin: auto;
}

.body-part__description {
position: relative;
}

.body-part__name {
position: relative;
margin: 0;
cursor: pointer;
padding: 0.5rem;
transition: transform 0.2s ease-in-out;
}

.body-part__name:hover {
color: rgba(76, 101, 245, 0.781);
transform: scale(1.2);
}

.body-summary {
position: absolute;
top: 20px;
/* left: -60px; */
width: 10rem;
background-color: rgb(57, 154, 233);
color: aliceblue;
border-radius: 0.5rem;
padding: 1rem;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}

.show {
opacity: 1;
}

/* Body Parts */

.hair {
width: 53%;
top: 15%;
left: 50%;
transform: translate(-50%, -50%);
}

.eyes {
width: 30%;
top: 20%;
left: 39%;
transform: translate(-50%, -50%);
}

.nose {
width: 32%;
top: 22%;
left: 38%;
transform: translate(-50%, -50%);
}


Подробнее здесь: https://stackoverflow.com/questions/777 ... -using-css