css 「position:sticky」で右寄せ（right:0）にする

基本

▼こんな感じの設定

.*** {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
}

やりたいこと

▼「top,left」じゃなく「bottom,right」。

.*** {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	right: 0;
}

これだと「右下」じゃなく「左下」になる。
調べると「right」を指定じゃなく「left」を指定する必要があるそうだ・・・

修正

右寄せにしたいので計算させるコトに。

.hoge {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	left: calc(100vw - 15px);
}

問題

右下に表示させるのが、いずれ複数になるコトを考慮して下記のような感じのHTMLにした。
すると・・・下記の「<a href="#">xxx</a>」と「position:sticky」と重なったらクリックができない・・・という問題が発生

<div><!-- 親要素 -->
	～ 省略 ～
	<a href="#">xxx</a>

	<div class="hoge"><!-- position:sticky -->
		<div style="text-align:right;">
			〇〇〇〇
		</div>
	</div>
</div>

解決

面倒だけどwidthを指定する

.hoge {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	left: calc(100vw - 15px);
	width: 100px;
}