position-visibility and @position-try to hide a popover

So I'm starting to experiment with the new properties and at-rules of popovers. And since popovers will end up in the top layer, I have yet to figure out how to use hide them if they would overflow e.g. a top main menu.

I figured out you could use

position-visibility: anchors-visible;

position-visibility: anchors-visible;

, but if the main menu is taller than the anchor, that doesn't really help.

Let's say I know the height of the main menu (e.g.

120px

120px

), shouldn't I be able to do something like this?

.popover {
  position-try-fallbacks: --bottom;
}

@position-try --bottom {
  margin-top: 120px;
  display: none;
}

.popover {
  position-try-fallbacks: --bottom;
}

@position-try --bottom {
  margin-top: 120px;
  display: none;
}

Or what's the solution here?

KP-C

Kevin Powell - Community•16mo ago

somrigostsås 🧀

position-visibility and @position-try to hide a popover

position-visibility: anchors-visible;

position-visibility: anchors-visible;

, but if the main menu is taller than the anchor, that doesn't really help.

Let's say I know the height of the main menu (e.g.

120px

120px

), shouldn't I be able to do something like this?

.popover {
  position-try-fallbacks: --bottom;
}

@position-try --bottom {
  margin-top: 120px;
  display: none;
}

.popover {
  position-try-fallbacks: --bottom;
}

@position-try --bottom {
  margin-top: 120px;
  display: none;
}

Or what's the solution here?

position-visibility and @position-try to hide a popover

Similar Threads

position-visibility and @position-try to hide a popover

Similar Threads

Similar Threads

Similar Threads