Foundation 6 中的 ActionSheet 出现在后面

Question

我刚开始使用Foundation for apps and while I was using the action sheet，我把它显示在元素后面（如图1）。在检查 CSS 时，它的定位是绝对的。这只是意味着我在某处遗漏了一些东西。

图1：动作Sheet出现在

后面

注意事项：此操作 sheet 在 AngularJS 指令中。

指令中的代码是：

<zf-action-sheet id="actionSheet">
    <zf-as-button class="">
        <i class="icon-menu">Seriously Missing?</i>
    </zf-as-button>
    <zf-as-content position="bottom">
        <div class="row">
            test 123
        </div>
    </zf-as-content>
</zf-action-sheet>

另请注意，相同的操作 sheet 正在导航栏上使用并且效果很好。如果有人能指导我正确的方向来解决这个问题，我将不胜感激。 :)

Answer 1

这可以通过添加

来解决

overflow: visible;

到操作表的容器，因为它包含在一个网格块中

<div class="grid-block"> // Insert here
  <zf-action-sheet id="actionSheet">
    <zf-as-button class="">
        <i class="icon-menu">Seriously Missing?</i>
    </zf-as-button>
    <zf-as-content position="bottom">
        <div class="row">
            test 123
        </div>
    </zf-as-content>
  </zf-action-sheet>
</div>

这是在设法找到相当隐蔽的 this 之后。

Foundation 6 中的 ActionSheet 出现在后面

ActionSheet in Foundation 6 appears behind

zurb-foundation

angularjs