元素重叠

Question

我有一个问题：我有一张卡片列表，我希望如果一张卡片悬停在右侧，它会显示一个框，其中包含这张卡片的信息，但这个框显示在下一张卡片的下方，我希望它显示在上面。如果有人可以提供帮助，这是主要代码。 ..................................................... ...............................

const renderAllCourses = 
courses.map((item, index) => {
  
  return (
    
    <Box  key={index}>
       
      <Link to="/description" style={linkStyle}>
       
          <ImageBoxContainer>
            <ImageBox src={item.img} />
          </ImageBoxContainer>
          <TextBox>
               <div> <Title>{item.title}</Title> </div>
               <div> <TeacherName>{item.enseignant} { item.role}</TeacherName></div>
               
           </TextBox>
          
      </Link>
      <DescCard 
         title={item.title} 
         desc={item.desc} 
         id={item.id} 
         objectifs={item.objectifs}
       />

   </Box>
    
      
     
    
  )
 
  })



  //DescCard Component
const DescCard = (props) => {

return (
<> 
 
  {(props.id % 5) !== 0 && 
    
    <DropDownContent  >

      <DropDownContainer >
        <div>
          <Title style={{marginTop:'24px'}}>{props.title}</Title>
          <p>{props.desc}</p>
      </div>
      {props.objectifs.map((item, i) => (
        <div key={i}>
         <ul>
          <ItemLi style={liStyle}><CheckIcon/> { item}</ItemLi>
          </ul>
          
       </div>
        
      
      ))}
        
      
        <Button>ADD TO CART</Button>
        <button style={{all: 'unset',cursor:'pointer'}}>
          <FavoriteBorderIcon  fontSize='large' />
        </button>  
     </DropDownContainer>

    </DropDownContent>
  }

 {
 (props.id % 5 )===0 &&
    <DropDownContentRight>
        <DropDownContainer>
        <div>
          <Title style={{marginTop:'24px'}}>{props.title}</Title>
          <p>{props.desc}</p>
        </div>
        {props.objectifs.map((item, i) => (
          <div key={i}>
            <ul>
            <li style={liStyle}><CheckIcon/> { item}</li>
            </ul>
            
          </div>
        
      
        ))}
          <Button>ADD TO CART</Button>
          <button style={{all: 'unset'}}> 
            <FavoriteBorderIcon fontSize='large' />
          </button>  

          </DropDownContainer>
    </DropDownContentRight>
    
  
  }
 </>
)


}

// STYLING


// Box Styling
const Box = styled.div`
  max-width:250px;
  min-width:150px;
  max-height:400px;
  min-height:350px;
  box-sizing: border-box;
  margin:7px;
  margin-bottom:25px; 
  position: relative;
  display: inline-block;
  `;


  const DropDownContainer = styled.div`
     margin:10px;    
   `;


 const DropDownContent = styled.div`
     display: none;
     position : absolute;
     top:7px;
     background-color : #697BFF;
     max-width:250px;
     min-width:350px;
     max-height:500px;
     min-height:450px;
     border: 1px solid;
     border-radius:14px;
     z-index:2;
     ${Box}:hover &{
      display:block;
     }`;


 const DropDownContentRight = styled.div`
    display: none;
    position : absolute;
    top:7px;
    background-color : #697BFF;
    max-width:250px;
    min-width:350px;
    max-height:500px;
    min-height:450px;
    border: 1px solid;
    border-radius:14px;
    margin-left:-290px;
    z-index:1;
    ${Box}:hover &{
      display:block;
    }
  `;