Trying to place an image in a fixed positon. Why the image is misplaced until I do a page refresh?

Question

Newbie here.

I just started playing around with ReactJS on codesandbox. I want to keep an image element (the green arrow) in a specific position over the gauge element. I tried it the simplest way I could think of, and it kinda suits what I need, but... When I open the page, the image is misplaced, but if I do a page refresh, the image will be exactly where I want it... why?! What can be the reason and any idea of how to solve it? Perhaps, can you tell me any other way of positioning an image in a specific place inside the div?

Here's the link: https://codesandbox.io/embed/gauge-ship-engine-1-h2nhx?fontsize=14&hidenavigation=1&theme=dark&codemirror=1

Here's the code:

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);

Thanks in advance!

Answer 1

It looks like your green arrow has not a reference. For instance the parent element has not a position declared. Try something like:

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