css 如何动态放置绝对位置以适应父级?

ctzwtxfj  于 2023-04-08  发布在  其他
关注(0)|答案(1)|浏览(128)

好吧,这有点难以解释我在寻找什么,但你知道当你有一个下拉菜单,当下拉菜单的内容不适合在屏幕上的下拉菜单改变方向或移动一点点,以适应?
我有一个组件,它包含一个绝对定位的下拉列表和一个3列的显示网格,它一直工作得很好,直到我到达屏幕的右边,然后它被压扁并溢出到右边,就像这样:

我希望发生的是:

在这种情况下,我只是在下拉列表元素上手动设置right:0,但由于它是一个组件,我想让它通用化,并让它自动具有这样的逻辑:如果是右满溢,则设置右:0。
当然,这应该在每个方向都是可扩展的(尽管我无法想象那里有多少用例),或者,一般来说:“如果它会溢出到右/左/上/下按钮,则设置(每个溢出)右/左/上/下:0.
这是可能的,甚至只有css?

46qrfjad

46qrfjad1#

尝试在你的CSS中使用类似的东西

.dropdown {
  position: absolute;
  transform: translateX(-100%);
  right: 0;
}

.dropdown.is-open {
  transform: none;
}

也许会有用

相关问题