Position Property

position controls how an element is placed. The default is static. relative is used when you want to nudge an element slightly, based on its original position. absolute positions the element relative to a positioned parent. fixed sticks to the browser viewport, so it won't move even when you scroll. sticky is like a hybrid between normal flow and fixed.

.chat-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

The chat button will always stay in the bottom-right corner of the browser. The badge will stick to the top-right corner of its parent card.