How to position a React component relative to its parent?
<p>I have a parent React component that contains a child React component.</p>

<pre><code>&lt;div&gt;
  &lt;div&gt;Child&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I need to apply styles to the child component to position it within its parent, but its position depends on the size of the parent.</p>

<pre><code>render() {
  const styles = {
    position: 'absolute',
    top: top(),    // computed based on child and parent's height
    left: left()   // computed based on child and parent's width
  };
  return &lt;div style={styles}&gt;Child&lt;/div&gt;;
}
</code></pre>

<p>I can't use percentage values here, because the top and left positions are functions of the child and parent's widths and heights.</p>

<p>What is the React way to accomplish this?</p>