Check out this bubbly border! Using Absolute Position to place the three 'circle' divs on the border of a relative postioned parent div.

Taken from Josh W Comeau's amazing course CSS-for-JS developers. Using position: absolute for children elements of a position:relative a nice bubble border effect can be created.

<div className="{box}">
  <div className="{`${circle}" ${big}`}></div>
  <div className="{`${circle}" ${medium}`}></div>
  <div className="{`${circle}" ${small}`}></div>
  <p>...</p>
</div>

.box {
  height: 150px;
  margin: 64px;
  border: 4px solid var(--color-text);
  position: relative;

  p {
    margin-top: 1rem;
    margin-left: 1rem;
  }
}

.circle {
  position: absolute;
  border: inherit;
  border-radius: 50%;
  background-color: var(--color-secondary);

  // elements with both classes, !nested
  // sass ampersand === .circle.big
  &.big {
    width: 50px;
    height: 50px;
    left: -20px;
    top: -30px;
  }

  &.small {
    width: 25px;
    height: 25px;
    left: 45px;
    top: -15px;
  }

  &.medium {
    width: 35px;
    height: 35px;
    left: -20px;
    top: 35px;
  }
}

An example of an absolutely postioned box relying on an ancestor having position:relative .

A simple Breadcrumb navigation component with Aria attributes