В слайд-шоу reve.js, как расположить заголовки H1 с помощью CSS в верхней части слайдов - PullRequest
Новая
       44

В слайд-шоу reve.js, как расположить заголовки H1 с помощью CSS в верхней части слайдов

0 голосов
/ 20 сентября 2019

Я использую reve.js для создания слайд-шоу в формате HTML.По умолчанию (и со всеми темами, которые я пробовал) раскрываем макеты .js по вертикали по центру всего содержимого каждого слайда.Это выглядит примерно так:

Imgur

Как я могу установить правило CSS для заголовка h1 или для одного из других селекторовкартюрн.js, чтобы заголовок h1остается в верхней части слайда, в то время как остальное по-прежнему вертикально по центру?Я имею в виду что-то вроде этого:

Imgur

Я уже попробовал несколько вещей.Например, 

.reveal h1 {
    position: absolute;
}

не работает, потому что с этим заголовок не «выходит» из вертикально центрированного section.

Я также играл с изменениями вверх по иерархии:

.reveal .slides {
  position: static;
}

(плюс h1 CSS сверху), но я не мог заставить его работать.

Наконец-то я попробовал из одного ответа подход к преобразованию, но это тоже не сработало - возможно, потому, чтокарты manifest.js уже используют само преобразование.

Есть идеи, каксделать это в show.js?

1 Ответ

0 голосов
/ 20 сентября 2019

Обычно это невозможно, хотя есть кое-что, что вы можете сделать, я считаю немного хакерским.Вы можете применить 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/>.

...