React，每个数组元素的z-index

Question

不久前我在这里收到答案，如何将每个img增加为数组的成员。尽管控制台显示 z-index 发生了变化，但同样的原则对 z-index 不起作用（增加的 img 应该位于其余部分之上）。为什么？

class Article extends React.Component{  
    constructor(props) {
        super(props)
        this.state = {showIncreaced: null}

    this.getImgStyle = this.getImgStyle.bind(this);
    this.increase = this.increase.bind(this);
    }

    increase (incId) {
        this.setState({showIncreaced: incId})
    }

  getImgStyle (id) {
    return {
      width: '20vw',
      marginRight: '0.5vw',
      marginLeft: '0.5vw',
      zIndex: this.state.showIncreaced === id ? '10' : '0',
      transform: this.state.showIncreaced === id ? 'scale(1.5, 1.5)' : 'scale(1, 1)'
    };
  }

    render(){   
        const TipStyle={                        
                marginBottom: '10px'
        }

    return(                     
        <div style={TipStyle}>                      
          <h2 style={{marginBottom: '1px'}}>{this.props.name}</h2>
          <div>
        {[1,2,3].map((id) => {
            return <img style={this.getImgStyle(id)} src={this.props[`img${id}`]} onMouseOver={this.increase.bind(this, id)} onMouseOut={this.increase} />
        })}                         
          </div>
        </div>                  
); 
}
}

https://jsfiddle.net/Nata_Hamster/fbs3m4jL/

Answer 1

这是因为您的图片元素 position 默认为 static。

如果您将图像位置更新为 position:absolute;，则 zIndex 值将按预期工作。这样做的问题是您需要使用左坐标定位图像，以便它们彼此相邻。这是 getImgStyle 的更新版本，说明了这个概念：

  getImgStyle (id) {
    return {

      position:'absolute', // Set absolute position
      left: `${(id-1) * 100}px`, // Calculate a left coordinate for image

      width: '20vw',
      marginRight: '0.5vw',
      marginLeft: '0.5vw',
      zIndex: this.state.showIncreaced === id ? '10' : '0',
      transform: this.state.showIncreaced === id ? 'scale(1.5, 1.5)' : 'scale(1, 1)'
    };
  }

这是一个working jsFiddle if you'd like to see it in action

Answer 2

将 position: 'relative', 添加到 getImgStyle 返回的对象中，因为 z-index 仅在 postion 设置为 static 以外的其他值（其默认值）时有效).最简单的方法是使用 relative，因为该元素仍然是文档流的一部分。

https://jsfiddle.net/fbs3m4jL/7/

React，每个数组元素的z-index

React, z-index for each array element

css

state

z-index

reactjs