Hi I am just trying to make some fixed part in my webpage. I want some text, input tag to be fixed. But when I wrote a code like down below, I get to know that I can't type in text field. I don't know why I can't.

Does anybody know Why is this happening and how can I fulfill my goal? thankyou

import React from "react";
import { Container, Row } from "react-bootstrap";

function Introduce(props) {
  return (
    <div>
      <div className="introduceSquare">
        <Container fluid>
          <Row>
            <h1> Meet to Share Emotion</h1>
            <h2>Where to go?</h2>
            <input
              className="code"
              autoComplete="on"
              placeholder="code door plz"
            />
          </Row>
        </Container>
      </div>
    </div>
  );
}

export default Introduce;

this is css code

.introduceSquare {
  width: 100%;
  text-align: center;
  position: fixed;
  margin-top: 10%;
  z-index: -998;
  color: #fdfce5;
}