How to fix and rotate a link to the right side of window without a negative position?-CodePudding

I have a link that has been rotated and fixed in the window. Problem is I don't know how to position it on the right edge without adding a negative position right.

Negative right position doesn't work when changing the screen sizes, so I need to find another solution..

Any ideas?

Codepen for reference also.

.section {
  height: 100vh;
}

.section-one {
  background-color: #f8f9fa;
}
.section-two {
  background-color: #e9ecef;
}
.section-three {
  background-color: #dee2e6;
}
.section-four {
  background-color: #ced4da;
}

.fixed-link {
  position: fixed;
  top: 50%;
  /* Need to be fixed to right without adding a negative position right */
  right: 0;
  transform: translateY(-50%);
  transform: rotate(270deg);
  transform-origin: 0 0;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

<a href="#" >FIXED LINK</a>

CodePudding user response：

The reason why it doesn't stick to the edge with using transform rotate is because it adjusts the container of the text, but not the text itself which uses the containers borders to stick to the edge of the screen.

A proposed solution without having to use negative right position is to use writing-mode instead, this targets the text directly instead of its container with:

writing-mode: vertical-rl; // This makes your text appear vertical

You can read more about it here for more details: Writing-mode

CodePudding user response：

Try this. although this is a few different on different screen sizes:

.section {
  height: 100vh;
}

.section-one {
  background-color: #f8f9fa;
}
.section-two {
  background-color: #e9ecef;
}
.section-three {
  background-color: #dee2e6;
}
.section-four {
  background-color: #ced4da;
}

.fixed-link {
  width: max-content;
  position: fixed;
  top: 50%;
  /* Need to be fixed to right without adding a negative position right */
  left: 95%;
  transform: translateY(-50%);
  transform: rotate(270deg);
  transform-origin: 0 0;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

<a href="#" >FIXED LINK</a>