Приклейте повернутый дочерний div к нижней части родительского

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

демо

.parent {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.section-title {
  float: left;
  position: sticky;
  transform-origin: 0% 0;
  transform: rotate(-90deg) translateX(-111%) translateY(0);
  font-size: 5em;
  line-height: 100%;
  font-weight: 600;
  top: 0;
  text-align: left;
  -webkit-transform-origin: 0% 0;
  -ms-transform-origin: 0% 0;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.content div {
  background-color: green;
  height: 500px;
  width: 500px;
}

.content.two {
  z-index: -1;
}

.content.two div {
  background-color: red;
  height: 500px;
  width: 500px;
}

<div class = "parent">
  <div class = "content two">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div class = "parent">
  <div class = "section-title"> section title </div>
  <div class = "content">
    <div></div>
    <div></div>
  </div>
</div>

<div class = "parent">
  <div class = "content two">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

javascript html jquery css sticky

11.12.2020 11:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо этого используйте writing-mode:

.section-title {
  float: left;
  position: sticky;
  font-size: 5em;
  line-height: 100%;
  font-weight: 600;
  top: 0;
  text-align: left;    
  /* rotate the text */
  writing-mode: tb;
  transform: scale(-1);
  /* don't take any space*/
  width: 0;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.content div {
  background-color: green;
  height: 500px;
  width: 500px;
}

.content.two div {
  background-color: red;
}

<div class = "parent">
    <div class = "content two">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class = "parent">
    <div class = "section-title"> section title </div>
    <div class = "content">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

  <div class = "parent">
    <div class = "content two">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

11.12.2020 11:20

Другие вопросы по теме

Подавать файлы html, css, js по подпути в go mux

Выбрать строки в текстовом поле

Как найти ВСЕ дочерние элементы с одним и тем же классом через js

Фильтрация html-таблицы, содержащей ссылки

Vuejs v-for в элементе option для выбора ввода. Получите значение из объекта JSON и используйте его в значении параметра

JavaScript, пытающийся добавить в HTML, не работает

Делаем элемент перетаскиваемым без идентификатора

Показать всплывающую подсказку, когда ввод недействителен

Можно ли использовать Unicode в атрибуте src тега <img> вместо пути

Поиск с фильтром по первой букве

Приклейте повернутый дочерний div к нижней части родительского

Ответы 1

Другие вопросы по теме

Похожие вопросы