Table of Contents

About

An overlay component is a component that comes above the actual components in a absolute position.

In Html, it would have a higher value on the z scale (ie z-index)

When two elements overlay each other, they overlap.

List

Because they differ only in their characteristics, most libraries offer them all.

All these elements are overlays:

  • A modal needs a click to show up
  • A dialog generally wraps a form.
  • A popover - An interactive mini-dialog floating element that displays information related to an anchor element when the element is clicked.
  • UI - Tooltip / Popup shows generally when the pointer goes over an element to add context
  • UI - DropDown - they are used in menus and forms to show a list of choice
  • A lightbox needs a click to show up and shows a video or image against a dark background.

Example

Software

Most software that will help to create overlay are positioning library