将旋转 child div 粘贴到 parent 的底部

Question

我试图将旋转的文本从顶部滚动到 parent div 到它的底部，问题是因为它是一个旋转的元素我无法将它居中正好在 parent 的底部，请查看下面的演示以了解我的观点。任何帮助将不胜感激

.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>

Answer 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>

将旋转 child div 粘贴到 parent 的底部

Stick Rotated child div to the bottom of parent

html

javascript

css

jquery

sticky