/* The targets' containing block must be an ancestor *outside* the scroll
   container so that scrolling can push them to overflow (and trigger fallbacks).
   Position-try options are evaluated against the inset-modified containing
   block, not the scrollport — so if the scroll container were the containing
   block, the target would scroll in lockstep with its anchor and never
   overflow. Making the scroll container non-positioned promotes the containing
   block up to the `.demo-elements` wrapper. See
   https://github.com/oddbird/css-anchor-positioning/issues/279. */
#position-try .scroll-container {
  position: static;
}

/* Clip targets at the wrapper (which tightly bounds the scroll container) so a
   target whose anchor has scrolled out of view doesn't float over other
   content. The wrapper is the targets' containing block, so this does not
   affect where fallbacks are evaluated. */
#position-try .demo-elements {
  overflow: clip;
}

#my-anchor-fallback {
  anchor-name: --my-anchor-fallback;
}

#my-anchor-fallback-2 {
  anchor-name: --my-anchor-fallback-2;
  top: 70px;
  left: 50px;
  position: relative;
}

#my-target-fallback {
  position-anchor: --my-anchor-fallback;
}

#my-target-fallback-2 {
  position-anchor: --my-anchor-fallback-2;
  opacity: 0.8;
}

#my-target-fallback,
#my-target-fallback-2 {
  position: absolute;

  /* First try to align the bottom, left edge of the target
     with the top, left edge of the anchor. */
  bottom: anchor(top);
  left: anchor(left);
  width: anchor-size(width);
  /* stylelint-disable-next-line property-no-deprecated */
  position-try-options: --bottom-left, --top-right, --bottom-right;
  position-try-fallbacks: --bottom-left, --top-right, --bottom-right;
}

@position-try --bottom-left {
  /* Next try to align the top, left edge of the target
     with the bottom, left edge of the anchor. */
  top: anchor(bottom);
  left: anchor(left);
  bottom: revert;
}

@position-try --top-right {
  /* Next try to align the bottom, right edge of the target
     with the top, right edge of the anchor. */
  bottom: anchor(top);
  right: anchor(right);
  left: revert;
  width: revert;
}

@position-try --bottom-right {
  /* Finally, try to align the top, right edge of the target
     with the bottom, right edge of the anchor. */

  top: anchor(bottom);
  right: anchor(right);
  width: 100px;
  height: 100px;
  bottom: revert;
  left: revert;
}