Google AMP amp-sidebar＆amp;固定定位z指数

Question

我有一个位置标题：固定，我试图实现amp-sidebar组件。

AMP正在创建添加style="top: calc(0px); pointer-events: initial; z-index: 10000;"的-amp-fixedLayer  修复Safari中的滚动性能（＆＃34; [FixedLayer]＆＃34;＆＃34;为了提高Safari中的滚动性能，我们现在将元素移动到固定的定位层：＆＃34; < / em>）

问题在于，由于amp-sidebar组件的样式中有z-index:9999!important，fixedLayer会显示在侧边栏的顶部。

我考虑过包装amp-sidebar，然后我可以添加我想要的z-index，但是amp-sidebar的父标签只能是＆＃39; body＆＃39;

任何想法如何解决这个问题？

Answer 1

我遇到了同样的问题，在摆弄了一下后，我找到了一种方法来编辑标题的Z-index。

放置它认为需要的z-index，但你可以调整这些值。例如：

    header {
        position: fixed;
        z-index: -2000;
        width: 100%;
        background-color: black;
        opacity: 0.7;
        color: white;
    }

这是我标题的CSS代码，这里的技巧是使用负z-index。 Amp将采用其默认值，从样式中添加z-index（在本例中为负）并将结果放入CSS中。

因此，在我的情况下，标题的计算z-index小于侧边栏，因此侧边栏位于标题的顶部。

希望这有帮助。

Answer 2

相当有限的选择

考虑到放大器背后的意图的一部分是将开发人员推向UI标准（侧边栏应始终占据窗口的整个高度），您将不得不轻易打破它。

注意：显然jQuery不是一个选项。

在侧栏上使用保证金

amp-sidebar {
    margin-top: 10em;
    margin-left: 5vw;
}

最后，请在此处提交错误报告：

https://github.com/ampproject/amp-by-example/issues/new

滚动你自己的放大器

1. 提交错误
2. fork the github repo。
3. 通过将侧边栏z-index设置得更高来修补错误。
4. 使用您的补丁回购。
5. 向主放大器回购提交拉动请求（修复您报告的错误）。

这是处理这些情景的正确方法。