css - React,每个数组元素的 z-index
问题描述
不久前,我在这里收到了答案,如何将每个 img 增加为数组的成员。不知何故,相同的原则不适用于 z-index(增加的 img 应该位于其余部分之上),尽管控制台显示 z-index 已更改。为什么?
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>
);
}
}
解决方案
添加position: 'relative',
到返回的对象,getImgStyle
因为z-index
仅在postion
设置为static
(其默认值)以外的其他值时才有效。最简单的方法是使用relative
,因为元素仍然是文档流的一部分。
推荐阅读
- node-modules - 排毒自动化:修改 GREYElementInteraction.m
- android - 如何从反汇编的 .smali 文件中组装 apk?
- asp.net-core - ASP.NET CORE 2.1 中弹出模式中的 Error.cshtml(使用异常处理中间件)
- python - 将类型从“列表”类更改为整数
- mysql - 在 Django 中查询可能包含以下任何 F、M、T、S、U、X 的 CSV 列
- java - 抑制 Java 异常堆栈跟踪
- typescript - 实例化接口类型的变量
- python - numpy.where 条件选择二维数组中的特定垂直列
- html - HTML 画布线条多种颜色
- c# - Xamarin Xaml C# cross-platform Can't get the image in ScrollView -> AbsoluteLayout -> Image to fill the entire width