试图把一个图像放在一个固定的位置。为什么在我进行页面刷新之前图像被放错了位置？

Question

新手来了。

我刚开始在代码箱上玩ReactJS。我想保持一个图像元素(绿色箭头)在一个特定的位置之上的量规元素。我试过我能想到的最简单的方法，这有点适合我的需要，但是.当我打开页面时，图像被放错了位置，但是如果我刷新页面，图像将正好在我想要的位置.为什么？!如何解决这个问题的原因和思路是什么？也许，您能告诉我在div内某个特定位置定位图像的其他方法吗？

下面是链接：https://codesandbox.io/embed/gauge-ship-engine-1-h2nhx?fontsize=14&hidenavigation=1&theme=dark&codemirror=1

下面是代码：

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import ReactSpeedometer from "react-d3-speedometer";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import arrow from "./greenarrow.png";

class Gauge extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };

    this.handleGaugeValueChange = this.handleGaugeValueChange.bind(this);
  }

  handleGaugeValueChange(e) {
    console.log(1);

    this.setState({
      value: e.target.value
    });
  }

  render() {
    return (
      <div className="center">
        <h1 className="title">Ship Engine 1</h1>

        <Container className="p-3">
          <Row>
            <Col>
              <div
                className="speedometer"
                style={{
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center"
                }}
              >
                <img
                  src={arrow}
                  alt="greenarrow"
                  style={{
                    position: "absolute",
                    opacity: 1,
                    zIndex: "1",
                    transform: "rotate(-35deg)",
                    marginLeft: "-65px",
                    marginTop: "-80px"
                  }}
                />

                <ReactSpeedometer
                  maxValue={150}
                  ringWidth={20}
                  customSegmentStops={[0, 30, 55, 65, 90, 120, 150]}
                  segmentColors={[
                    "#FAFAFA",
                    "#FAFAFA",
                    "#007fff",
                    "#FAFAFA",
                    "#FAFAFA",
                    "#FAFAFA"
                  ]}
                  needleHeightRatio={0.72}
                  valueTextFontSize="19px"
                  needleTransitionDuration={9000}
                  needleTransition="easeElastic"
                  currentValueText="${value} kW"
                  value={this.state.value}
                />
              </div>
              <div className="divLabelReq">
                <label
                  className="labelReq"
                  htmlFor="value"
                  style={{ color: "#6b6964" }}
                >
                  Requested: 39.7kW
                </label>
              </div>
            </Col>
            <Col>
              <form className="form-settings" onSubmit={this.handleSubmit}>
                <div className="form-row">
                  <div className="form-group col-md-5">
                    <label
                      className="label"
                      htmlFor="value"
                      style={{ color: "white" }}
                    >
                      Change Gauge Value:{" "}
                    </label>
                    <input
                      type="number"
                      className="form-control"
                      name="value"
                      id="value"
                      placeholder="0"
                      onChange={this.handleGaugeValueChange}
                      value={this.state.keywords}
                    />
                  </div>
                </div>
              </form>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Gauge;

const rootElement = document.getElementById("root");
ReactDOM.render(<Gauge />, rootElement);

提前感谢！

Answer 1

看起来你的绿色箭头没有引用。例如，父元素没有声明一个位置。试一试如下：

         <div
            className="speedometer"
            style={{
              width: "100%",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              position: "relative"
            }}
          >