CSSのposition fixedの使い方について 先日同じ投稿をしましたが、うまく説明できなかっ

CSSのposition fixedの使い方について
先日同じ投稿をしましたが、うまく説明できなかったので再度質問します。

ボタンを画面上に設置したいと考えています。

ブラウザの端から位置を固定するソースは作れますが(掲載画像の固定方法1)、画像の端から一定位置にボタンを固定し(掲載画像の固定方法2)なおかつレスポンシブでも画像から同じ距離になるようにするにはソースコードをどのように書いたら良いでしょうか？散々調べていますがなかなかこのやり方が見つかりません。HTML ,CSS に関して技術的に詳しい方、宜しくお願いします。

No.1 回答者： nishi16 回答日時： 2018/03/12 19:09

”position: fixed” は位置がウィンドウ基準になるので，

汎用的にご希望の方法を実現することはできないです。
写真画像がブラウザの端から何pxか決まっているなら，それを足せば実現できます。

あるいは画像の端を基準にしたいのであれば，
ボタンが画像の外に出る必要はないと思うので，
"positon: absolute"などを使ってはどうでしょうか。

この回答へのお礼

ありがとうございます。やはりfixed の場合はブラウザ基準なのですね、、、
会社の上司からの指示でどうしてもボタン固定とのことですのでfixed で固定するのを模索していきます。

お礼日時：2018/03/13 16:35

No.2 回答者： naokita 回答日時： 2018/03/13 04:51

@media only screen and (max-width: 991px){ right: ？px;}

@media only screen and (max-width: 480px){ right: ？px;}

？pxを計算すれば良いのです。（クエリのサイズは応用してね）

ウィンドウから写真画像までの距離 + 20px ＝ ？
なので、
28～40pxぐらいの範囲だと想像しますが。

---------

スクロール中に、そんな所にボタンがあると（スマホの縦画面だと）ウザいと思いますがｗ

この回答へのお礼

ボタンの位置は会社の上司(プロのデザイナー)からの指示で作っております。

PC 上で見るときは画像の左右にかなり余白があります。

途中(おそらく768px位)から余白なし(画像が画面幅いっぱいに広がる)になりますので、余白なしの時にnaokita様の作り方が有効かと思います。ありがとうございます。

お礼日時：2018/03/13 16:46

No.3 回答者： M-SOFT 回答日時： 2018/03/20 03:13

ボタンが画像の右と下から20pxの位置に固定ということですか?

ボタンがどの様な動作をするボタンかわかりませんが、リンクのためのボタンなら、ボタンを入れた画像を作りイメージマ
ップを使ってそのボタン部分にリンクを張るというのどうでしょうか。

イメージマップについては

イメージマップを作る
http://www.tagindex.com/html5/embed/map.html
イメージマップのリンク領域を設定する
http://www.tagindex.com/html5/embed/area.html

この辺を参考に。