title: How to position absolutely positioned element relative to ref position
body: <p>I've got a bit of a problem here, hope I get help :0
  well I am building a pretty little App on React and I have a navbar which includes an absolutely positioned div and two images for now... I have refs on these images and I want this navbar div to be positioned with the same top coordinates upon render...
  Here is how I'm trying:</p>
  
  <p>this code sets top state property to refs position:</p>
  
  <pre><code>componentDidMount() {
      this.fetchApi();
      this.setState({
        scrolling: { top: this.first.current.offsetTop },
      });
    }
  </code></pre>
  
  <p>this is basically navbar</p>
  
  <pre><code>let { top } = this.state.scrolling;
  &lt;div className="map__left-column__logos"&gt;
          &lt;img
            ref={this.first}
            onClick={this.linkContainerClick}
            className="img-svg"
            src={pin}
            alt="pingreen"
          /&gt;
          &lt;img onClick={this.linkContainerClick} src={logo} alt="logo" /&gt;
          &lt;div
            ref={this.myRef}
            className="link-container"
            style={{ transform, top }}
          &gt;
            &lt;div className="link-container__upcurve"&gt;&lt;/div&gt;
            &lt;div className="link-container__wrapper"&gt;&lt;/div&gt; 
            &lt;a href="#" id="container-href"&gt;
              {" "}
              &lt;img
                style={{
                  top: img1,
                  transition: "all linear .2s",
                }}
                className="img-svg"
                src={chosenImg}
                alt=""
              /&gt;
            &lt;/a&gt;
            &lt;div className="link-container__downcurve"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and this is the linKContainerClick function trying to calculate where to scroll after I click the images </p>
  
  <pre><code>linkContainerClick = ({ target }) =&gt; {
      let id = target.offsetTop;
      let pixel = id - this.state.scrolling.top;
      this.setState({ innerHtml: target.alt });
      this.setState({
        scrolling: {
          ...this.state.scrolling,
          transform: `translateY(${pixel}px)`,
        },
      });
    };
  </code></pre>
  
  <p>The problem is that on the first render of the App the link-container element is misplaced by 20 pixels... after refresh it moves to the right place</p>
  
  <p><a href="https://i.stack.imgur.com/PqIgu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PqIgu.jpg" alt="enter image description here"></a></p>