固定位置不会将图像弹出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。

让我知道是否可行：）

Answer 2

我只是通过随机测试一些东西来做到这一点。不知道为什么，但是它正在工作。如果有人知道我为什么想知道。

我为usermod -a -G docker andreyradkevich的父div设置了固定位置。

PortfolioItemsWrapper