reactjs - Buttons keeps under Images - Stack Overflow

admin管理员组

文章数量:1394769

In the code below I want the components RmvBtn to appear below the pictures (y-axis). Or above the pictures (z-axis).

But the image (motion.img component) keeps covering the RmvBtn component whatever I try. Why is that ? Or what am I missing ?

When the page loads I can confirm that the RmvBtn components (one for each picture) are created as expected.

import React, {useState,useEffect} from 'react';
import useFirestore from '../hooks/useFirestore';
import {motion} from 'framer-motion';
import './styles.css';

const ImageManage = ({section,setSelectedImg}) => {
  const {docs} = useFirestore(section);
  const [theIcnPos,setTheIcnPos] = useState('')

  .....

  return (
    <div className="img-grid">
      {docs && docs.map(doc => (
        <motion.div className="img-wrap" key={doc.id}
                    layout
                    whileHover={{opacity:1}} >
          <div className='-z-10'>
            <motion.img src={doc.imageRefer}
              initial={{opacity:0}}
              animate={{opacity:1}}
              transition={{delay:1}} />
          </div>
          <RmvBtn/>
        </motion.div>
      ))}
    </div>
  )
} /* End of ImageManage */

function RmvBtn() {
  return (
    <div className='z-20'>
    <button onClick={() => console.log('Remove-Clicked!')}>
      <div className='font-semibold text-2xl text-red-700'>
        Remove
      </div>
    </button>
    </div>
  )
} /* End of RmvBtn */

export default ImageManage;

本文标签： reactjsButtons keeps under ImagesStack Overflow