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

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 或其他值