【css】position:absoluteで中央揃えする最近の方法

Tue, 05 Jul 2022 09:00:08 +0900

とりあえずメモ。対象の要素をposition:absolute;で左右中央や、上下中央、または上下左右中央に配置する最近のやり方。

position:absolute;とtransformを使用

参考ページ

https://cotodama.co/position-absolute-center/ https://cotodama.co/position-absolute-center/

https://arts-factory.net/position/ https://arts-factory.net/position/

position:absolute;以外で中央配置する方法

参考ページ

https://www.esz.co.jp/blog/2847.html https://www.esz.co.jp/blog/2847.html

【CSS】iPhoneのSafariでposition:fixedが効かないときにやったこと

Sun, 13 Feb 2022 20:37:29 +0900

position:fixed;が効かない

これはiPhoneに限ったことかもしれませんが、position:fixed;で**『TOPに戻る』ボタン**を画面スクロールに合わせて追従するように、ブラウザの右下に固定しようとしました。ところが、Windows PCのChromeではちゃんと固定されているのですが、iPhoneのSafariやChromeアプリでは固定されませんでした。そこで解決策メモ。position:sticky;でも同様みたいです。

ベンダープレフィックスが必要だった

解決策はposition: -webkit-fixed;の追加で解決できました。

.ScrollTop {
  position: -webkit-fixed;
  position: fixed;
  right: 0;
  bottom: 0; 
  display: flex;
  z-index: 100;
}

あと、ヒントになった以下のページよると、やタグでは、display: flex;またはdisplay: block;も必要みたいです。

https://zenn.dev/tigerr/articles/82fc091cfe69bd https://zenn.dev/tigerr/articles/82fc091cfe69bd

https://ecmemo.net/safari-sticky-problem https://ecmemo.net/safari-sticky-problem

ちなみにお世話になった『トップに戻る』ボタンのサンプル

以下のページを参考に、一定のスクロール後に**『TOPに戻る』ボタン**を作成したところ、iPhoneのSafariでボタンが固定されませんでした。このソースにposition: -webkit-fixed;の追加することで解決できました。

https://yuyauver98.me/scroll-show-hide-btn/ https://yuyauver98.me/scroll-show-hide-btn/

https://recooord.org/scroll-to-top/ https://recooord.org/scroll-to-top/

Position on qwerty.work

【css】position:absoluteで中央揃えする最近の方法

position:absolute;とtransformを使用

参考ページ

position:absolute;以外で中央配置する方法

参考ページ

【CSS】iPhoneのSafariでposition:fixedが効かないときにやったこと

position:fixed;が効かない

ベンダープレフィックスが必要だった

ちなみにお世話になった『トップに戻る』ボタンのサンプル