css - 固定位置不会从 div 中弹出图像

Question

我在元素中显示图像时遇到问题。我想在悬停文本时显示图像。如果使用 Chrome，它可以正常工作，但至少在 Safari 中图像会部分隐藏在它的父元素中。

Screenshot from Chrome

Screenshot from Safari

父元素代码:

const PortfolioItemsWrapper = styled.div`
  width: 100%;
  max-width: 960px;
  position: fixed;
  bottom: 0;
  overflow-x: scroll;
  white-space: nowrap;
  display: block;
  text-align: center;
  justify-content: center;
`

<PortfolioItemsWrapper>
 {props.allWordpressWpPortfolio.edges.map(portfolioItem => (
  <PortfolioWorks
   key={portfolioItem.node.id}
   image={portfolioItem.node.featured_media.source_url}
   id={portfolioItem.node.id}
   title={portfolioItem.node.title}
   link={`/portfolio/${portfolioItem.node.slug}`}
  />
 ))}
</PortfolioItemsWrapper>

图片代码:

const Wrapper = styled.div`
  display: inline-block;
  margin: 0 10px;
`

const ImageWrapper = styled.div`
  max-width: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
`

const PortfolioImage = styled.img`
  max-width: 300px;
  z-index: -5;
  opacity: 0;
  transition: 0.25s linear;
`

    <Wrapper key={id}>

      <ImageWrapper>
        <PortfolioImage style={imageStyle} src={image} />
      </ImageWrapper>

      <PortfolioItemNameLink to={link} onMouseEnter={changeStyle} onMouseLeave={resetStyle}>
        {title}
      </PortfolioItemNameLink>
    </Wrapper>

Answer 1

虽然我不确定这是否可行:

尝试将 overflow-y: visible; 添加到您的父 css。

让我知道是否有效:)