css - 正元素是相对于页面的，而不是父 React 组件

Question

我有一个位于 Post 组件中的 DeleteWindow Rect 组件。我希望元素窗口在屏幕上居中，而不是在父组件上居中。我使用了我所有的 css 知识来相对于屏幕进行定位，但是组件仍然相对于父组件定位并且不能超出它。告诉我如何解决这种情况

import React from 'react';
import {postApi} from "./../utils/api"
import {DeleteWindow} from "./DeleteWindow"

export class Post extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            onDelete: false
        }
        this.removePost = this.removePost.bind(this);
        this.redactPost = this.redactPost.bind(this);
        this.callbackRemove = this.callbackRemove.bind(this);
    }

    removePost(){
        this.setState({onDelete: true});
    }

    callbackRemove(isRemove){
        this.setState({onDelete: false});
        if(isRemove)
            this.props.onRemove(this.props.id);
    }

    redactPost(){
        postApi.setUpdatePost({id: this.props.id, title: this.props.title, text: this.props.text, author: this.props.author}).then(window.location.assign("/redactPost"));
    }

    render() {
        function EditButton(props){
            if (props.admin){
                return(
                    <>
                        <h className="editButton" onClick={props.redactPost}>
                            Изменить
                        </h>
                        <h className="removeButton" onClick={props.removePost}>
                            Удалить
                        </h>
                    </>
                );
            }
            return null;
        }

        function DeleteBlock(props){
            if (props.onDelete)
                return <DeleteWindow onDelete={props.onDelete} callbackRemove={props.callbackRemove}/>
            return null;
        }

        return(
            <div>
                <DeleteBlock onDelete={this.state.onDelete} callbackRemove={this.callbackRemove}/>
                <hr/>
                <div className="post">
                    <p className="titlePost">{this.props.title}</p>
                    <p className="textPost">{this.props.text}</p>
                    <p className="author">{this.props.author}</p>
                    <p className="center">
                        <p>
                            <i className="date">{this.props.date}</i>
                            <EditButton admin={this.props.admin} redactPost={this.redactPost} removePost={this.removePost}/>
                        </p>
                    </p>
                </div>
            </div>
        )
    }
}




import React from 'react';

export class DeleteWindow extends React.Component{
    constructor(props) {
        super(props);
        this.clickYes = this.clickYes.bind(this);
        this.clickNo = this.clickNo.bind(this);
    }

    clickYes(){
        this.props.callbackRemove(true);
    }

    clickNo(){
        this.props.callbackRemove(false);
    }

    render(){
        return(
            <div className="deleteBlock">
                <p>Вы действительно хотите удалить этот пост?</p>
                <button className="deleteWindowButton" onClick={this.clickYes}>Да</button>
                <button className="deleteWindowButton" onClick={this.clickNo}>Нет</button>
            </div>
        );
    }
}



@media (min-width: 850px) {
    .deleteBlock {
        width: 40%;
        font-size: 16pt;
        margin-left: 30%;
    }

    .deleteWindowButton{
        width: 30%;
        font-size: 15pt;
    }
}

@media (max-width: 850px) and (min-width: 580px) {
    .deleteBlock {
        width: 60%;
        font-size: 14pt;
        margin-left: 20%;
    }

    .deleteWindowButton{
        width: 30%;
        font-size: 13pt;
    }
}

@media (max-width: 580px) and (min-width: 400px) {
    .deleteBlock {
        width: 80%;
        font-size: 13pt;
        margin-left: 10%;
    }

    .deleteWindowButton{
        width: 30%;
        font-size: 12pt;
    }
}

@media (max-width: 400px){
    .deleteBlock {
        width: 90%;
        font-size: 12pt;
        margin-left: 5%;
    }

    .deleteWindowButton{
        width: 30%;
        font-size: 11pt;
    }
}

.deleteBlock{
    position: fixed;
    text-align: center;
    background-color: #676a6d;
    font-family: "Lucida Calligraphy", cursive;
    border-radius: 20px;
    border: 2px solid black;
    z-index: 1;
}

.deleteWindowButton{
    border-radius: 20px;
    padding: 1%;
    margin: 1%;
    outline: none;
}

.deleteWindowButton:hover{
    cursor: pointer;
}

标签： cssreactjs