有没有办法解决这个 CSS Flexbox 和位置绝对错误？

Question

我目前正在开发一个 React 应用程序，其中有 flex 容器卡（带有电影海报背景的 .FilmCard，它们本身位于具有 flex-wrap 的 flex 容器中）。每张卡片都有一个绝对定位的项目（一个 FontAwesome 箭头图标）。我的应用程序在导航栏顶部显示其中一部电影的箭头。这是意外行为。有什么办法可以修复这个错误吗？我包括我为 FilmCard 添加的 CSS 和箭头图标。

import React from 'react';
import { PropTypes } from 'prop-types';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleArrowRight } from '@fortawesome/free-solid-svg-icons';

function FilmCard({
  filmKey,
  title,
  release,
  image,
}) {
  const imageStyle = {
    backgroundImage: `url(${image})`,
    backgroundSize: 'cover',
  };
  return (
    <Link to={`/FilmDetails/${filmKey}`} key={filmKey}>
      <div className="FilmCard" key={filmKey} style={imageStyle}>
        <FontAwesomeIcon icon={faCircleArrowRight} className="CircleArrow" />
        <div className="FilmDescription">
          <h3>{title}</h3>
          <p>{release}</p>
        </div>
      </div>
    </Link>
  );
}

FilmCard.propTypes = {
  filmKey: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  release: PropTypes.string.isRequired,
  image: PropTypes.string.isRequired,
};

export default FilmCard;

.FilmsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 3rem;
}

.FilmCard {
  width: 20rem;
  height: 30rem;
  margin: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition:
    0.7s transform cubic-bezier(0.155, 1.105, 0.295, 1.12),
    webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12),
    box-shadow 0.7s;
}

.FilmCard:hover {
  transition-timing-function: ease-in-out;
  -moz-box-shadow: 13px 13px 0 0 black;
  -webkit-box-shadow: 13px 13px 0 0 black;
  box-shadow: 13px 13px 0 0 black;
  transform: scale(1.03);
}

.CircleArrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: white;
}

访问页面here

和我的 GitHub 存储库，其中包含所有代码 here。

非常感谢您的帮助！

编辑：我不知道代码的原因，但我通过修改导航栏的 z-index 避免了箭头显示。感谢您的帮助！

Answer 1

我不知道该错误的原因，但我通过修改导航栏的 z-index 避免了箭头显示，因此它显示在所有内容之上。感谢所有查看的人！

Answer 2

尝试将 position: relative; 添加到 FilmCard

有没有办法解决这个 CSS Flexbox 和位置绝对错误？

Is there a way to fix this CSS Flexbox and position absolute bug?

javascript

css

flexbox

font-awesome

reactjs