Tim Dashboard React无法在固定位置上使用

问题描述

我正在使用Tim Dark仪表板在https://www.creative-tim.com/product/black-dashboard做出反应，并且在使用固定位置时遇到问题。我在主要AdminLayout之外创建了一个登录页面：

<Router history={hist}>
    <Switch>
        <Route path="/login" component={Login} />
        <Route
            path="/admin"
            render={props => <AdminLayout {...props} />}
        />
        <Redirect from="/" to="/admin/dashboard" />
    </Switch>
</Router>

登录页面如下：

import React from 'react';
import { useHistory } from 'react-router-dom';
import { useForm } from 'react-hook-form';

import {
  Card,CardHeader,CardBody,CardTitle,Row,Col,Form,FormGroup,FormText,Input,Label,Button
} from "reactstrap";

const Login = () => {
    const { register,handleSubmit,errors } = useForm();
    const { setAlert } = useContext(AlertContext);
    const history = useHistory();


const tapHandler = () => {
    setAlert({ message: 'hello',variant: 'success'})
};

return(
    <div className="d-flex vh-100">
        <Row className="m-auto align-self-center">
            <Col>
                <Card className="login-card">
                    <CardHeader>
                        <CardTitle>
                            <h4>Login</h4>
                        </CardTitle>
                    </CardHeader>
                    <CardBody>
                        <Form onSubmit={handleSubmit(onSubmit)}>
                            <FormGroup controlId="email">
                                <Label for="email">E-mail</Label>
                                <Input
                                    type="email"
                                    name="email"
                                    id="email"
                                    placeholder="[e-mail]"
                                    innerRef={register({ required: true })}
                                />
                                <FormText>
                                    <span className="text-danger">
                                        {errors.email && 'E-mail required'}
                                    </span>
                                </FormText>
                            </FormGroup>
                            <FormGroup controlId="password">
                                <Label for="password">Password</Label>
                                <Input
                                    type="password"
                                    name="password"
                                    id="password"
                                    placeholder="password"
                                    innerRef={register({ required: true })}
                                />
                                <FormText>
                                    <span className="text-danger">
                                        {errors.password &&
                                            'Password required'
                                        }
                                    </span>
                                </FormText>
                            </FormGroup>
                            <Button color="primary" block type="submit">
                                Login
                            </Button>
                        </Form>
                        <Button onClick={tapHandler}>Tap</Button>
                    </CardBody>
                </Card>
            </Col>
        </Row>
         
        // Fixed doesn't work here
        <div className="some-div" />
    </div>
  );
}; 

export default Login;

使用some-div的页面底部的div不适用于固定位置，css如下：

.some-div {
    position: fixed;
    width: 300px;
    top: 0px;
    right: 0px;
}

它仅位于页面的左下方。它不遵守固定坐标系。以前有人遇到过此类问题吗？

解决方法

以下是我分解您的JSX时的输出：

<div className="d-flex vh-100">
  <Row className="m-auto align-self-center">
  </Row>

  <div className="some-div">some div</div>
</div>

您有一个flex容器作为Login容器和.some-div容器的父容器。其中Login和.some-div是同级。因此，如果有的话（甚至不都应用您提到的固定位置），输出显示应该是Login容器在左侧，.some-div容器在右侧- flexbox的工作。

所以到那时，我看不到为什么您的.some-div

仅位于页面左下方

fixed的位置应该在包含自定义样式表时正确显示。

import "./styles.css";

通过单击下面的我的CodeSandBox按钮，您可以找到一个有效的示例。您可以将其用作比较的基础。