style(body-parts): adjust position and z-index of body parts

src/components/HumanBody.tsx

@@ -56,24 +56,42 @@ const bodyParts = {
   Thorax: {
     normal: Thorax,
     active: Thorax_dow,
-    style: { top: '90px', left: '90px', width: '118px', height: '148px' },
+    style: {
+      top: '93px',
+      left: '88px',
+      width: '118px',
+      height: '148px',
+      zIndex: 1,
+    },
   },
   Abdomen: {
     normal: Abdomen,
     active: Abdomen_dow,
-    style: { top: '240px', left: '95px', width: '132px', height: '116px' },
+    style: {
+      top: '241px',
+      left: '81px',
+      width: '132px',
+      height: '116px',
+      zIndex: 1,
+    },
   },
   Spine: {
     normal: Spine,
     active: Spine_dow,
-    style: { top: '100px', left: '130px', width: '38px', height: '264px' },
+    style: {
+      top: '93px',
+      left: '128px',
+      width: '38px',
+      height: '264px',
+      zIndex: 1,
+    },
   },
   UpperLimb_Left: {
     normal: UpperLimb_Left,
     active: UpperLimb_Left_dow,
     style: {
-      top: '100px',
-      left: '15px',
+      top: '113px',
+      left: '0px',
       width: '88px',
       height: '280px',
       zIndex: 1,
@@ -83,8 +101,8 @@ const bodyParts = {
     normal: UpperLimb_Right,
     active: UpperLimb_Right_dow,
     style: {
-      top: '100px',
-      left: '200px',
+      top: '113px',
+      left: '206px',
       width: '88px',
       height: '280px',
       zIndex: 1,
@@ -93,12 +111,24 @@ const bodyParts = {
   LowerLimb_Left: {
     normal: LowerLimb_Left,
     active: LowerLimb_Left_dow,
-    style: { top: '355px', left: '90px', width: '68px', height: '337px' },
+    style: {
+      top: '357px',
+      left: '79px',
+      width: '68px',
+      height: '337px',
+      zIndex: 1,
+    },
   },
   LowerLimb_Right: {
     normal: LowerLimb_Right,
     active: LowerLimb_Right_dow,
-    style: { top: '355px', left: '140px', width: '68px', height: '337px' },
+    style: {
+      top: '355px',
+      left: '148px',
+      width: '68px',
+      height: '337px',
+      zIndex: 1,
+    },
   },
 };
 
@@ -142,7 +172,16 @@ export default function HumanBody() {
             src={isActive ? active : normal}
             alt={part}
             onClick={() => handleClick(part)}
-            style={{ position: 'absolute', cursor: 'pointer', ...style }}
+            style={{
+              position: 'absolute',
+              cursor: 'pointer',
+              ...style,
+              zIndex: isActive
+                ? style.zIndex
+                  ? style.zIndex + 1
+                  : 1
+                : style.zIndex,
+            }}
           />
         );
       })}