Anchor positioning

Anchor positioning places an element relative to another one, its anchor, without JavaScript. It is the basis for tooltips, dropdown menus and popovers.

anchor-name: gives a name, starting with two dashes, to the element that acts as the anchor.
position-anchor: sets which anchor an element with position: absolute or fixed uses.
position-area: places the element in an area around the anchor, such as top, bottom or right.
position-try-fallbacks: defines alternative positions for when the element does not fit.

Example

The element with the tooltip class is anchored to the element with the anchor class. Change position-area to move it around.

ResultLiveContainer width100%

html

<div class="container">
  <div class="anchor">anchor</div>
  <div class="tooltip">tooltip</div>
</div>

<div class="container">
  <div class="anchor">anchor</div>
  <div class="tooltip">tooltip</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  height: 14rem;
  padding: 0.5rem;
  place-items: center;
}

.anchor {
  anchor-name: --anchor;
  padding: 1rem 1.5rem;
}

.tooltip {
  background: #d9d2f5;
  margin: 0.5rem;
  padding: 0.5rem 1rem;
  position: absolute;
  position-anchor: --anchor;
  position-area: top;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  height: 14rem;
  padding: 0.5rem;
  place-items: center;
}

.anchor {
  anchor-name: --anchor;
  padding: 1rem 1.5rem;
}

.tooltip {
  background: #d9d2f5;
  margin: 0.5rem;
  padding: 0.5rem 1rem;
  position: absolute;
  position-anchor: --anchor;
  position-area: top;
}

Edit the code or use the selectors: the result updates instantly.