right в CSS — зсув елемента від правого краю при position

HTML

<div class="area">
    <div class="absolute">right: 20px</div>
</div>

CSS

.area {
    position: relative;
    height: 160px;
    background: #eee;
}

div.absolute {
    position: absolute;
    right: 20px;
    width: 200px;
    height: 120px;
    border: 3px solid #8AC007;
}

HTML

<div class="block static">
  <p>Нормальний блок</p>
</div>
<div class="block absolute">
  <p>Розташований праворуч, за допомогою <strong>right</strong></p>
</div>

CSS

.block {
  width: 350px;
  height: 100px;
  text-align: center;
  border: 2px solid #666;
}

.static {
  position: static; /* default */
}

.absolute {
  position: absolute;
  right: 1em;
  top: 10em;
}

HTML

<div class="stage">
    <span class="tag">контейнер із position: relative</span>
    <div class="b st">static: right 50px</div>
    <div class="b rel">relative: right 40px</div>
    <div class="b relneg">relative: right -40px</div>
    <div class="b abs">absolute: right 10px</div>
    <div class="b stretch">left 0 + right 0, width auto</div>
    <div class="b over">виграє left</div>
    <div class="b pct">absolute: right 25%</div>
</div>

<p class="cap">Контейнер із transform стає точкою відліку навіть для fixed:</p>
<div class="scene">
    <span class="tag">transform: translateZ(0)</span>
    <div class="fx">fixed: right 10px</div>
</div>

CSS

.stage {
    position: relative;
    width: 420px;
    height: 250px;
    padding: 20px;
    background: #eef1f5;
    border: 6px solid #b9c6d8;
}

.tag {
    display: block;
    margin-bottom: 6px;
    font: 600 .8em/1.4 system-ui, sans-serif;
    color: #5a6472;
}

.b {
    width: 200px;
    padding: 4px 8px;
    margin-bottom: 6px;
    background: #2f6fd0;
    color: #fff;
    font: 12px/1.6 system-ui, sans-serif;
    white-space: nowrap;
}

.st {
    position: static;
    right: 50px;
}

.rel {
    position: relative;
    right: 40px;
}

.relneg {
    position: relative;
    right: -40px;
    background: #72b043;
}

.abs {
    position: absolute;
    top: 130px;
    right: 10px;
    background: #c0392b;
}

.stretch {
    position: absolute;
    top: 165px;
    left: 0;
    right: 0;
    width: auto;
    background: #8a5cd6;
}

.over {
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    width: 120px;
    background: #d67c1c;
}

.pct {
    position: absolute;
    top: 235px;
    right: 25%;
    background: #1b7f79;
}

.cap {
    margin: 22px 0 6px;
    font: 600 .9em/1.4 system-ui, sans-serif;
    color: #5a6472;
}

.scene {
    position: relative;
    transform: translateZ(0);
    width: 420px;
    height: 90px;
    padding: 20px;
    background: #cfe8d8;
    border: 6px solid #9dc7ac;
}

.fx {
    position: fixed;
    right: 10px;
    width: 180px;
    padding: 4px 8px;
    background: #c0392b;
    color: #fff;
    font: 12px/1.6 system-ui, sans-serif;
}

HTML

<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>right</strong>.</p>

<p>Вона встановлює зміщення позиціонованого елемента щодо правого краю.</p>

<strong>right: </strong>
<input type="number" class="input" id="num" value="24">px
<strong>;</strong>
  
</div>

<div id="block">24px</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
  padding: 16px;
}

.box {
  background-color: #f7f7f7;
  padding: 16px;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#block {
  background-color: gold;
  padding: 16px;
  position: absolute;
  top: 50%;
  right: 24px;
}

JS

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var num = document.querySelector('#num').value;
  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('right', num + 'px'));
  document.querySelectorAll('#block').forEach((n) => n.innerHTML = num + 'px');
}));

HTML

<div class="info">
	<p>За допомогою властивості <code>right</code> ми можемо вказати зміщення позиціонованого елемента щодо правого краю.</p>
	<p>Перший елемент зміщений на <em>16px</em>, другий - <em>40%</em>.</p>
</div>

<div class="wrapper">
	<div class="block one"><div class="child"><span>16px</span></div></div>
	<div class="block two"><div class="child"><span>40%</span></div></div>
</div>

CSS

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
}

.info {
	padding: 16px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	width: 25%;
	height: 150px;
	background-color: gold;
	position: relative;
}

.block .child {
	background-color: #222;
	display: inline-block;
	color: #fff;
	position: absolute;
	top: 0;
	padding: 12px;
}

.block.one .child {
	right: 16px;
}

.block.two .child {
	right: 40%;
}