将旋转的子 div 粘贴到父级的底部

Question

i'm trying to stick a rotated text in scroll from top to the parent div to the bottom of it, the problem is due it's a rotated element i can't center it exactly to the bottom of the parent, please check the demo below to understand my point. any help will be highly appreciated

demo

 .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

Use writing-mode instead:

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