css - 在 reveal.js 幻灯片中如何通过 CSS 在幻灯片顶部定位 H1 标题

Question

我正在使用 reveal.js创建 HTML 幻灯片放映。默认情况下(以及我尝试过的所有主题)reveal.js 以垂直居中的方式布置每张幻灯片的完整内容。它看起来有点像这样:

我如何为 h1 标题或其他 reveal.js 选择器之一设置 CSS 规则，以便 h1 标题保持在幻灯片的顶部，而其余部分仍然垂直居中？我的意思是这样的:

---

我现在尝试了一些东西。例如

.reveal h1 {
    position: absolute;
}

不起作用，因为这样标题不会“脱离”垂直居中的部分。

我还尝试了层次结构的变化:

.reveal .slides {
  position: static;
}

(加上上面的 h1 CSS)，但我也无法让它工作。

最后我尝试从 one answer transform 方法，但这也不起作用 - 可能是因为 reveal.js 已经使用了 transform 本身。

知道如何在 reveal.js 中执行此操作吗？

Answer 1

通常这是不可能的，尽管有些事情你可以做，但我认为有点 hacky。您可以在父-父对象上应用 3d 转换。这将强制浏览器在影响 position: fixed 的单独层中绘制父-父对象。子节点。

所以这样的事情应该可行:

.reveal {
    transform: translate3d(0,0,0);
}
.reveal h1 {
    position: fixed;
    top: 0;
    left: 0;
}

不过，最好的方法是制作 <section/> position: static (您仍然可以使用 display: flex 将其垂直居中)并使用 postion: absolute在 <h1/> 上.