css - 如何将移动元素定位在父元素后面

Question

我正在创建青蛙的复制品，并且在尝试让“敌人”方块在离开屏幕时移动到板后面时遇到问题。到目前为止，当他们退出游戏容器屏幕时，它们会停留在游戏容器的顶部。所以我试图找到一种方法让敌人的方块在离开屏幕时移动到棋盘后面。我已经尝试使用 z-index 并且了解您不能将 z-index 用于父元素和子元素进行堆叠，但我看到其他问题建议在父元素和子元素周围使用包装器元素，然后将子元素放置在其后面。这就是我目前已经实现的，但它仍然无法正常工作。敌人似乎在集装箱箱后面移动，但当他们“退出”集装箱时，您仍然可以看到它们。让我知道任何想法。我正在使用 React 来构建应用程序。谢谢！

    <div style={{ top: "0px", left: "200px"}}>
        <h1 style={{ textAlign: "center" }}>Frogger</h1>
        <h4 style={{ textAlign: "center" }}>Move with the arrow keys</h4>
        <div style={{position: 'relative', zIndex: 10}}>
        <div    style={this.gameContainerStyle}>
          <Player player={this.state.player} />

          {this.state.enemies.map((enemy) => (
            <Enemy key={enemy.key} enemy={enemy} />
          ))}
        </div>

        </div>
        {this.state.collision ? <div>Game Over!</div> : <div></div>}
        {
        this.state.player.position.y === 0 ? <div>You Won!</div> : <div></div>}
      </div>

这是正在渲染的内容，因此您可以看到敌人元素和样式为 gameContainerStyle 的父元素。下面是 gameContainer 的当前样式

  gameContainerStyle = {
    position: "relative",
    width: `${this.numberOfColumns * this.columnWidth}px`,
    height: `${this.numberOfRows * this.rowHeight}px`,
    border: "1px solid black",
    zIndex: initial
  };

下面是 Enemy 组件的样式

import React from 'react';

const Enemy = ({ enemy }) => {
  return (
    <div
      style={{
        display: 'inline-block',
        border: '1px solid black',
        position: 'relative',
        backgroundColor: 'red',
        width: `${enemy.width}px`,
        height: `${enemy.height}px`,
        left: `${enemy.position.x}px`,
        top: `${enemy.position.y}px`,
        zIndex: -1
      }}
    />
  );
};

export default Enemy;

标签： cssz-index