Kevin Powell - Community•2w ago

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;, 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), 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?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

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