React-bootstrap: Documentation for custom overlays should highlight how important position relative is

[sunjay]

Documentation: https://react-bootstrap.github.io/components.html#custom-overlays-overlay

It says,

Creating custom overlays is as easy as wrapping some markup in an Overlay component

In reality though you also need to include position: relative in your parent element's CSS or else the overlay will NOT be positioned properly. This is snuck into the example through a style attribute but is not highlighted and so is easy to miss.

From the example code of the above link:

return (
  <div style={{ height: 100, position: 'relative' }}>
    ...
  </div>
);

[taion]

It's not the parent, it's just the container (if specified) that needs to have position: relative.

[sunjay]

@taion You're right. Either way, it should probably be documented so people don't have to guess it from the code.

[leojh]

+1