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

Question

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

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

---

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

.reveal h1 {
    position: absolute;
}

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

我还对层次结构进行了更改：

.reveal .slides {
  position: static;
}

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

最后，我从一个答案中尝试了转换方法，但这也不起作用 - 可能是因为reveal.js 已经使用了转换本身。

知道如何在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/>。