固定位置不会从 div 中弹出图像答案

【问题标题】：Fixed position doesn't pop Image out of div固定位置不会从 div 中弹出图像
【发布时间】：2020-02-07 19:23:35
【问题描述】：

我在项目中显示图片时遇到问题。我想在悬停文本时显示图像。如果使用 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>

【问题讨论】：

图片的 z-index 为负值。您可能需要在悬停时更新它或完全删除它。
我只是想如果我将overflow-x: scroll; 带离父元素图像会正确显示，但标题没有按我的意愿设置...
我尝试将 z-index 值更改为 9999，但没有任何效果，因此我将其完全删除。

标签： css reactjs gatsby styled-components

【解决方案1】：

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

我为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;
`

【讨论】：

【解决方案2】：

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

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

让我知道这是否有效:)

【讨论】：

我试过了，这不是解决这个问题的方法。