Vertical sticky text positioning element

Question

Vertical sticky text positioning element

Is there a way to use CSS only to keep vertical text aligned next to other elements without any awkward white space or incorrect sizing issues? One method I've tried involves setting the position to sticky, but this creates problems with calculating height and scrolling beyond the parent element:

Check it out here

https://i.sstatic.net/Nnxag.png

Using techniques like transform:rotate, negative margins, or similar approaches only seem to exacerbate the issue. The challenge lies in correctly determining the height of the text relative to its container.

Another attempt at solving the problem

h2 {
  position: sticky;
  top: 120px;
  margin: 0;
  left:32px;
  transform-origin: top left;
  font-weight: 900;
  overflow: visible;
  white-space: nowrap;
  writing-mode: vertical-lr;  
}

I've experimented with various solutions including adjusting height, width, margins, rotation, transforms, and text orientation. Is there a way to achieve correct sticky positioning for vertically-oriented text within a parent element while maintaining proper alignment?

css css-position sticky

Answer 1

Answer №1

The space in your design is achieved through the use of top: 120px and margin: 120 0 styles. By replacing these with another element as a spacer, you can achieve the desired effect.

section {
  width:100%;
  position:relative;
  margin:0 auto;
  padding:0 0;
  box-shadow: 0 0 2px 2px #000;
}

.row {
  display:flex;
  flex-flow:column;
  padding-left:120px;
}

.item {
  width:100%;
  height:360px;
  background:blue;
}

.item:nth-of-type(odd) {
  background:green;
}

h2 {
  position: sticky;
    top: 0;
    margin: 0;
    left:32px;
    /* rotate: 90deg; */
    transform-origin: top left;
    /* transform: translate(0,-100%); */
    font-weight: 900;
    /* width: 0; */
    /* height: 0; */
    overflow: visible;
    white-space: nowrap;
    writing-mode: vertical-lr;
  
}

<section>
  <p>Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. </p>
  <h2>MY STICKY WORDS! THESE ARE LONG!</h2>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</section>

Answer 2

The space in your design is achieved through the use of top: 120px and margin: 120 0 styles. By replacing these with another element as a spacer, you can achieve the desired effect.

section {
  width:100%;
  position:relative;
  margin:0 auto;
  padding:0 0;
  box-shadow: 0 0 2px 2px #000;
}

.row {
  display:flex;
  flex-flow:column;
  padding-left:120px;
}

.item {
  width:100%;
  height:360px;
  background:blue;
}

.item:nth-of-type(odd) {
  background:green;
}

h2 {
  position: sticky;
    top: 0;
    margin: 0;
    left:32px;
    /* rotate: 90deg; */
    transform-origin: top left;
    /* transform: translate(0,-100%); */
    font-weight: 900;
    /* width: 0; */
    /* height: 0; */
    overflow: visible;
    white-space: nowrap;
    writing-mode: vertical-lr;
  
}

<section>
  <p>Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. </p>
  <h2>MY STICKY WORDS! THESE ARE LONG!</h2>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</section>

Vertical sticky text positioning element

Answer №1

Similar questions

What could be causing the issue with object-fit not functioning properly within a container with a max

Guide on modifying CSS properties when hovering over the parent element

What is the solution for resolving the "cannot resolve" issue in CSS for an Angular project?

Adjust the width of the dropdown list to be distinct from the width of the dropdown button

What is the best way to personalize the icon for this navigation button?

Set the width of the left div in percentage and have the right div automatically fill

Adjusting the appearance of Material-ui table within the row.getRowProps() function

"Merging the vibrancy of RGB with the subtlety of

Immersive full-screen YouTube video embedded as hero background

Height of Bootstrap 4 footer aligned to the bottom

What is the best way to reposition the main body content lower on the page when switching to mobile layout?

Leveraging the power of Javascript to trigger 2 functions when a button is clicked

Creating a unique carousel design using only CSS in Bootstrap

The display of the Myriad Pro font is not appearing correctly

After adding a new class, NextJS fails to style the div appropriately

Adding a scroll bar to a fixed container: tips and tricks

What is the best way to manipulate the size and orientation of an image upon hovering over

Tips for minimizing the width of a form in CSS/HTML

Issues with width transitions in Edge when using the ::after pseudo-element

Maintain the jquery menu in an open state after it has been