如何将这个弹出窗口置于最前面？

Question

我是 React 的新手。我使用 React 创建了电影应用程序项目。然后我为这个项目创建了一些额外的样式。我想为此项目添加一个弹出窗口。我为这个组件编写了一些代码。但是这个弹出组件出现在我的组件的后面Movielist。如何让这个弹出窗口到最前面？

这是我的 App.js 代码

import React, { useEffect, useState } from "react"

import MovieList from "./components/MovieList"

const featured_api =

  "https://api.themoviedb.org/3/discover/movie?`api_key=b23a3ea528a2edc9d8e8d585a98023e&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1"`

const search_api =

  "https://api.themoviedb.org/3/search/movie?api_key=b23a3ea528a2edc9d8e8d585a98023e&query="

function App() {

  const [movies, setMovies] = useState([])

  const [search, setSearch] = useState("")

  useEffect(() => {

    getMovies(featured_api)

  }, [])

  const getMovies = (api) => {

    fetch(api)

      .then((res) => res.json())

      .then((data) => {

        setMovies(data.results)

      })

  }

  const handleOnSubmit = (e) => {

    e.preventDefault()

    if (search) {

      getMovies(search_api + search)

      setSearch("")

    }

  }

  const handleOnChange = (e) => {

    setSearch(e.target.value)

  }

  return (

    <>

      <header>

        <form onSubmit={handleOnSubmit}>

          <input

            className="search"

            type="text"

            placeholder="Search"

            value={search}

            onChange={handleOnChange}

          />

        </form>

      </header>

      <div className="movie_container">

        {movies.length > 0 &&

          movies.map((movie) => <MovieList key={movie.id} {...movie} />)}

      </div>

    </>

  )

}

export default App

这是我的 MovieList 组件

import React from "react"

import Window from "./Window"

const img_api = "https://image.tmdb.org/t/p/w500"

const MovieList = ({

  title,

  poster_path,

  overview,

  vote_average,

  release_date,

Answer 1

这与反应无关。使用 css z-index 将元素放在前面。您应该将 className="popup-box" 的 div 更改为 z-index 1000 或其他值