How do I fix the indexing problem in my html using css?

I am trying to make a component in react where there is an image of a body anatomy and on that image there are names and lines pointing to the relating body part and when you click on the name a box appears with a description about that body part. everything works fine but when the box opens, the stack level of elements are not correct and it seems like that the stack flow is image, description container and at the top, the body part names and lines. In result, the name and the line of the other body part can be seen on top of the description containers. Seems like an indexing issue. I tried giving index values but nothing seems to be working. I want the new box that opens to cover the name of the below parts. there are more body parts in the completed code. Do you guys have ideas on how can I fix this issue?
I have not included the JS code because it is irrelevant to the issue as the issue lies within HTML and CSS.
Thanks in advance.

   <section className='anatomy-container'>
      <hr className='line' />
      <h1 className=''>Surgeries</h1>
      <img className='anatomy-image' src={FBA} alt='body part surgeries' />
      <div className='body-parts-container'>
        <div className='body-part hair'>
          <div className='arrow'></div>
          <div className='body-part__description'>
           <h3
            className='body-part__name'
            onClick={() => bodyPartHandler('hair')}
          >
            Hair
           </h3>
           <p className={`body-summary ${isOpenHair && 'show'}`}>
            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.
           </p>
          </div>
          <div className='arrow'></div>
        </div>
        <div className='body-part eyes'>
          <div className='arrow'></div>
          <div className='body-part__description'>
            <h3
              className='body-part__name'
              onClick={() => bodyPartHandler('eyes')}
            >
              Eyes
            </h3>
            <p className={`body-summary ${isOpenEyes && 'show'}`}>
              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.
            </p>
          </div>
        </div>
        <div className='body-part nose'>
          <div className='arrow'></div>
          <div className='body-part__description'>
            <h3
              className='body-part__name'
              onClick={() => bodyPartHandler('nose')}
            >
              Nose
            </h3>
            <p className={`body-summary ${isOpenNose && 'show'}`}>
              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.
            </p>
          </div>
        </div>
      </div>
    </section>



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%);
}