位置：固定在reveal.js中答案

【问题标题】：position:fixed in reveal.js位置：固定在reveal.js中
【发布时间】：2023-03-31 23:28:01
【问题描述】：

我正在尝试为我的reveal.js 演示文稿制作一个标题，该标题会粘贴在屏幕顶部。标题中的内容在每张幻灯片的基础上都是动态的，所以我必须将标记放在部分标签中。

如果标记在 section 标记内，显然 position:fixed 在reveal.js 中并不能真正提供令人满意的结果。我无法真正弄清楚为什么会这样，但我在 github 存储库中找到了一些信息，建议将演示文稿大小设置为适合视口大小：

Reveal.initialize {
    ...
    width: '100%',
    height: '100%',
    ...
}

但它仍然对我不起作用 - 似乎演示文稿并没有真正受到上述影响。这是一个演示：

https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/reveal.js/index.html

有什么办法解决这个问题吗？

【问题讨论】：

没有想法。但我想做相反的事情（在左下角放置一个块），我同样感到沮丧。
这是我提到的 github 上的线程，但我什至无法让节目填满视口：github.com/hakimel/reveal.js/issues/857 我还没有做到这一点，但我的计划是放一些文字在幻灯片中，然后在加载时使用 javascript 将其移出幻灯片。

标签： position fixed reveal.js

【解决方案1】：

将此添加到 css：

.reveal.slide .slides > section, .reveal.slide .slides > section > section {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: absolute !important;
  top: 0 !important;
  align-items: center !important;
}
section > h1, section > h2 {
  position: absolute !important;
  top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
}
.print-pdf .reveal.slide .slides > section, .print-pdf .reveal.slide .slides > section > section {
  min-height: 770px !important;
  position: relative !important;
}

【讨论】：

【解决方案2】：

在你的 main.html 末尾添加：

Reveal.initialize({ center: false, })

【讨论】：