Html 如何使溢出到模态元素中的弹出元素看起来不被切断（语义ui）

我正在使用语义用户界面开发一个日历选择器。我使用了他们的，但是只有一半的弹出窗口可见，其余的溢出到modal div本身。我希望它显示在内容上方。我知道javascript可以做到这一点，但我希望避免这种情况

有什么想法吗？我尝试过调整z索引，但没有效果，因为它嵌入到了模态中。非常感谢。请参阅下文：

---

当在父div上使用

相对的
或
绝对的
定位元素时，在父div上设置
溢出时，这是一个问题

基本上，如果不强制某些元素（日历弹出窗口、选择输入等）在打开时处于“固定”位置，则无法解决此问题

好消息是：
某些库已经考虑到了这一点，并内置了属性/函数等来进行更正。
例如，Bootstrap需要添加以下内容：
datacontainer=“body”
，它告诉元素在哪里附加到DOM

如果未使用带修复程序的库：

一个简单的开关在这里不是那么容易。您需要实现一个函数来计算日期输入底部的位置，并将适当的CSS left/top属性附加到该位置。这是因为“固定”将元素固定到页面上的一个位置，而不考虑父规则

此外，还必须考虑滚动事件。（如果用户在日历打开时滚动怎么办？）

更新：

根据您正在使用的语义文档：

$('.longer.modal')
  .modal('show')
;

这将强制模式内容滚动，从而在父div上设置了
overflow-y:scroll

尝试使用以下方法：

$('.long.modal')
  .modal('show')
;

此页面滚动以覆盖所有模式内容，希望能够防止中断。如果验证，我们知道溢出是问题所在。
我有一个类似的问题，我在语义UI卡的一个跨距中有一个很长的文本，我需要隐藏溢出，但同时，当用户将鼠标悬停在文本的显示部分时，我需要显示整个文本的弹出窗口。我是这样解决问题的：

<div class="content">
    <div class="description" style="position: absolute; width: 172px; height: 19px;">
        <span style="display: block; width: 100%; height: 100%;" data-tooltip="A very very very very very very very long text" data-position="bottom left"></span>
    </div>
    <div class="description" style="text-overflow: ellipsis; overflow-x: hidden;">
        <span style="white-space: nowrap;">A very very very very very very very long text</span>
    </div>
</div>


非常长的文本

第一个
div
基本上在第二个
div
上创建了一个不可见的覆盖，因此当用户将鼠标悬停在上面时，它会显示弹出窗口。此外，由于卡片的高度和宽度是固定的，因此在这种情况下，我对覆盖元素的高度和宽度进行硬编码没有问题。
我想您需要这样做，就像文档中说的：将此attibute设置为false->movePopup:false

$('#button_event_trigger').popup({
                popup: $('.custom.popup'),
                movePopup: false, //this here
                on: 'click'
            });

在我的例子中，我在侧边栏中有一个按钮，需要触发弹出窗口，然后弹出窗口出现在容器中，溢出隐藏，cssz-index不起作用。使用此atributtemovePopup:false现在弹出的语义ui超过了其他元素的顶部

请按照我的anwser进行操作：