親要素の右下にfixedで要素を固定したい

前提・実現したいこと

親要素に対して、右下の位置にposition:fixedで要素を固定したいです。

現在、製作しているサイトは、
すべてを内包しているメインのコンテンツが中央に配置されており、
左右には余白があります。

そこにpageTOPへジャンプするボタンを、左右の余白ではなく、
メインページ上の右下部に表示させたいのですが、その手法が分かりません。

試したことと、発生している問題

親要素に対して固定する方法について調べたところ、
親要素に対して左上であれば、固定することが可能とのことでした、
position:fixedで、左端を親要素基準にする

しかしながら、親要素に対する左端からのパーセントでの指定は、
50％までしか効かず、それ以降はパソコンの画面幅になってしまいます。
position:fixedで親要素に対し右端に固定

そこで、親要素の左からピクセル指定することを考えましたが、
ウィンドウのサイズを変えたときに位置が動いてしまい、
常に表示したい位置に固定できません。
（そもそもこれだと親要素をrelativeにする必要が感じられません…）

ソースコード

html
1<body>
2    <main>
3        <a href="#">▲</a>
4    </main>
5</body>

css
1body {
2    background-color: #000;
3}
4
5main {
6    background-color: pink;
7    height: 100vh;
8    margin: auto;
9    position: relative;
10    width: 85%;
11}
12
13a {
14    position: fixed;
15    bottom: 0;
16    right: 0;
17}
18

※画面幅を変更すると▲の位置がずれます。

補足情報（FW/ツールのバージョンなど）

ブラウザ：GoogleChrome 78.0.3904.108（Official Build）

行動規範の内容に同意します

回答2件

position プロパティの sticky と text-align プロパティを使うことで、そのような動作が可能だと思います (動作確認用リンク)。もし質問文には書かれていない条件が幾つかあるならば、私は JavaScript を使用することを考えますが、条件などの詳細な記載がないため、今回は具体的なコードは省略します。

HTML
1<main>
2  <article></article>
3  <div class="totop">
4    <a href="#">▲</a>
5  </div>
6</main>

CSS
1body {
2  background-color: #000;
3}
4
5main {
6  background-color: pink;
7  margin: auto;
8  width: 85%;
9}
10
11article {
12  width: 100%;
13  height: 150vh;
14}
15
16.totop {
17  position: sticky;
18  bottom: 0;
19  text-align: right;
20}
21
22.totop > a {
23  background: red;
24}

投稿2019/11/28 20:53

s8_chu

総合スコア14731

ベストアンサー

もし、

CSS
1* {
2  margin: 0;
3  padding: 0
4}

のようにしているなら

CSS
1a {
2  right: 7.5%
3}

で良いかと思いますがおそらく書かれていなかったのでしょう。
サンプル

s8_chuさんのにも出てきていますができればJavaScriptを使うことをお勧めします。
その手法を以下に示しておきます。

aタグにはIDでwithをつけたとします。

JS
1window.onresize = function(){
2  document.getElementById('with').style.right = window.pageXOffset + document.getElementsByTagName('main')[0].getBoundingClientRect().left + 'px';
3}

わかりやすくすると以下の通りになります。

JS
1window.onresize = function(){
2  var target = document.getElementById('with');
3  var parent = document.getElementsByTagName('main')
4  target.style.right = window.pageXOffset + parent[0].getBoundingClientRect().left + 'px';
5}
6

投稿2019/11/29 01:13

総合スコア10429

2019/11/30 06:41

上記のJavascriptを使用することで表示したかった位置に配置することができました。しかしながら、位置決めが読み込み時の１回だけなので、ウィンドウサイズを変更すると位置がずれてしまうことがありました。そこで調べたところ、JQueryのresize()を使用することでウィンドウの変更に対応できることが分かり、なんとか思い通りの挙動にできました。この度はご回答ありがとうございます！