在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），但我也无法让它工作。

最后我从one answer 尝试了转换方法，但这也不起作用——可能是因为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 将其垂直居中）并在 <h1/> 上使用 postion: absolute。

Answer 2

我可以通过添加以下代码在https://revealjs.com/#/1 处调整reveal.js 示例的代码：

section {
    display: flex !important;
    flex-direction: column;
    top: unset !important; 
    height: 100vh;
}

section p {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

html是这样的：

<section class="present" style="top: 189px; display: block;">
    <h2>Hello There</h2>
    <p>
        reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
    </p>
</section>

我添加的上述css将在考虑h2标题后的剩余空间内将段落居中。

要将标题从流程中移出以使页面上的段落居中，忽略标题的大小，您可以尝试将标题包装成这样：

<div style="position: relative;">
    <h2 style="position: absolute;">Hello There</h2>
</div>

希望对您有所帮助。无论如何添加一个额外的元素（或者像我展示的那样包装h2，或者在h2中）来实现这样的事情？