有没有办法修复这个CSS Flexbox并定位绝对错误

Question

我目前正在开发一个React应用程序，其中我有柔性容器卡(一个有电影海报背景的.FilmCard，它们本身就在一个有柔性包装的柔性容器中(。每张卡片都有一个绝对定位的项目(一个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;
}

访问此处的页面

以及我的GitHub repo和这里的所有代码。

我们将非常感谢您的帮助！

编辑：我不知道代码的原因，但我通过修改导航栏的z索引来避免箭头显示。谢谢你的帮助！

Answer 1

尝试将position: relative;添加到FilmCard

Answer 2

我不知道错误的原因，但我通过修改导航栏的z索引来避免箭头显示，使其显示在任何东西的顶部。感谢所有查看它的人！