Advanced React

Chapter 13 · 9 examples

React portals and why do we need them

CSS: absolute positioning · Absolute is not that absolute · Understanding Stacking Context · Position: fixed. Escape the overflow · Stacking Context in real apps · How React Portal can solve this · React lifecycle, re-renders, Context, and Portals · CSS, native JavaScript, form submit, and Portals

  1. Example 1Absolute positioning a dialog
  2. Example 2Absolute is actually relative
  3. Example 3z-index and stacking context
  4. Example 4Overflow clipping a dialog
  5. Example 5Fixed cannot escape stacking
  6. Example 6The stacking context trap
  7. Example 7Fixing it with createPortal
  8. Example 8Portals and React behavior
  9. Example 9Portals and DOM behavior