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

I'm currently working on a React app where I have flex container cards (a .FilmCard with a movie poster background, they themselves are in a flex container which has flex-wrap). The cards each have one item positioned absolutely (a FontAwesome arrow icon). My app is showing the arrow for one of the movies on top, on the Navbar. This is unexpected behavior. Is there any way to fix this bug? I include the CSS I added for the FilmCard and the arrow icon.

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;
}

Visit the page here

and my GitHub repo with all the code here.

Your help will be greatly appreciated!

Edit: I don't know the reason for the code, but I avoided the arrow showing by modifying the z-index for the navbar. Thanks for your help!

CodePudding user response：

I don't know the reason for the bug, but I avoided the arrow showing by modifying the z-index for the navbar so it shows on top of anything. Thanks to everyone who checked it out!

CodePudding user response：

Try to add position: relative; to FilmCard