/* Promote the targets' containing block to the `.demo-elements` wrapper
   (outside the scroll container) so scrolling can push them to overflow and
   trigger fallbacks. Position-try options are evaluated against the
   inset-modified containing block, not the scrollport. See
   https://github.com/oddbird/css-anchor-positioning/issues/279. */
#position-try-tactics .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-tactics .demo-elements {
  overflow: clip;
}

#my-anchor-try-tactics {
  anchor-name: --my-anchor-try-tactics;
}

#my-anchor-try-tactics-2 {
  anchor-name: --my-anchor-try-tactics-2;
  top: 5em;
  left: 5em;
  position: relative;
}

#my-target-try-tactics {
  position-anchor: --my-anchor-try-tactics;
}

#my-target-try-tactics-2 {
  position-anchor: --my-anchor-try-tactics-2;
}

#my-target-try-tactics,
#my-target-try-tactics-2 {
  position: absolute;
  bottom: anchor(top);
  left: anchor(right);
  /* stylelint-disable-next-line property-no-deprecated */
  position-try-options: flip-block, flip-inline, flip-start;
  position-try-fallbacks: flip-block, flip-inline, flip-start;
}