How does HTML & CSS handle overlay?

This task is covered in 2 stacks on this page: HTML & CSS, React. The " Modal" snippet in HTML & CSS uses ` `.

Which code does the HTML & CSS example use?

The " Modal" snippet uses ` `, from the Semantic Elements section of the HTML & CSS cheat sheet.

Which stacks cover "overlay" on this page?

HTML & CSS, React. Together they hold 3 copy-ready snippets for this task.

Overlay

3 snippets across 2 stacks - HTML & CSS, React

HCHTML & CSS

<dialog> Modal

HC · Semantic Elements

Syntax

<dialog id="myDialog">
  Content
  <button>Close</button>
</dialog>

Example

<dialog id="confirmDialog">
  <h2>Confirm Deletion</h2>
  <p>This will permanently remove the item. Continue?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

<!-- Open with: document.getElementById('confirmDialog').showModal() -->

Note Use showModal() to open with a backdrop that traps focus (accessible). Use show() for a non-modal popup. The form method="dialog" approach closes the dialog and sets its returnValue to the button's value.

Inset Shorthand

HC · Layout & Positioning

Syntax

inset: top right bottom left;
inset: all;

Example

/* Fill entire parent */
.overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
}

/* 20px from each edge */
.inset-box {
  position: absolute;
  inset: 20px;
}

Note inset is shorthand for top, right, bottom, and left. inset: 0 is equivalent to top: 0; right: 0; bottom: 0; left: 0. It follows the same clockwise shorthand pattern as margin and padding.

REReact

Portals

RE · Patterns

Syntax

import { createPortal } from 'react-dom';
createPortal(children, domNode);

Example

import { createPortal } from 'react-dom';

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        <button className="close-btn" onClick={onClose}>X</button>
        {children}
      </div>
    </div>,
    document.getElementById('modal-root')
  );
}

// Usage
function App() {
  const [showModal, setShowModal] = useState(false);
  return (
    <div>
      <button onClick={() => setShowModal(true)}>Open</button>
      <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
        <h2>Modal Title</h2>
        <p>Modal body content here.</p>
      </Modal>
    </div>
  );
}

Note Portals render children into a different DOM node outside the parent hierarchy, but events still bubble through the React tree (not the DOM tree). Perfect for modals, tooltips, and dropdowns that need to escape overflow:hidden or z-index contexts.

Frequently asked questions

How does HTML & CSS handle overlay?: This task is covered in 2 stacks on this page: HTML & CSS, React. The "<dialog> Modal" snippet in HTML & CSS uses `<dialog id="myDialog">`.
Which code does the HTML & CSS example use?: The "<dialog> Modal" snippet uses `<dialog id="myDialog">`, from the Semantic Elements section of the HTML & CSS cheat sheet.
Which stacks cover "overlay" on this page?: HTML & CSS, React. Together they hold 3 copy-ready snippets for this task.
Is there anything to watch out for?: Yes. For "<dialog> Modal": Use showModal() to open with a backdrop that traps focus (accessible). Use show() for a non-modal popup. The form method="dialog" approach closes the dialog and sets its returnValue to the button's value.