固定位置不弹出图像 div

Question

我在项目中显示图像时遇到问题。我想在悬停文本时显示图像。如果使用 Chrome 它可以正常工作，但至少在 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; 添加到您的 parents css。

如果可行请告诉我:)

Answer 2

我只是通过非常随机的测试才做对的。不知道为什么，但它的工作。如果有人知道为什么我想知道。

我为 PortfolioItemsWrapper 的父 div 设置了固定位置。

const Wrapper = styled.div`
  width: 100%;
  max-width: 960px;
  position: fixed;
  bottom: 0;
`

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

固定位置不弹出图像 div

Fixed position doesn't pop Image out of div

css

reactjs

gatsby

styled-components