[ 解決済 ] CSSでbottom: 0px;を指定した時の表示について
[ 解決済 ] CSSでbottom: 0px;を指定した時の表示について
タグ: CSS
-
投稿者投稿
-
2023年9月21日 9:37 PM #79588
博之上田参加者■ WordPress のバージョン
バージョン 6.3.1■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.11.0■ Pro Unit のバージョン
バージョン 0.25.1■ スキンの種類
Origin III■ プラグインの種類・バージョン
Blocks Animation: CSS Animations for Gutenberg Blocks バージョン 2.3.4
Contact Form 7 バージョン 5.8
Lightning G3 Pro Unit バージョン 0.25.1
Popup Maker バージョン 1.18.2
UpdraftPlus – バックアップ/復元 バージョン 1.23.10
VK All in One Expansion Unit バージョン 9.91.1.0
VK Block Patterns バージョン 1.31.0
VK Blocks Pro バージョン 1.61.2.0■ 期待する動作
イメージにphoto2_homeというクラスを指定し、以下のCSSを指定したら、bottom: 0px;なので青いボックスの内側最下部に接して画像が表示される。selector {
position: relative;
width: 100%;
height: 77%;
background-color: blue;
}
.photo2_home {
position: absolute;
bottom: 0px;
left: 0px;
width: 50%;
z-index : 30;
}■ 自分で試した事
bottom: 0px;
の代わりに
vertical-align: bottom;
指定height: 77%; をpxで指定
■ 症状が発生するブラウザ
Safari、Chrome■ 実際の症状
イメージにphoto2_homeというクラスを指定し、以下のCSSを指定したら、青いボックスの上側に接して画像が表示される。2023年10月3日 10:17 AM #79825
うなこモデレーターselector { position: relative; width: 100%; height: 77%; background-color: blue; }
このCSSは親のブロックに書いてあるということですよね。
(画像ブロックをグループブロックなどで囲っている状態)heightをpx指定にしてみるといかがでしょうか?例えば600pxにしてみてください。
2023年10月3日 1:08 PM #79833
博之上田参加者うなこさま
返信ありがとうございます。ご推察の通り、CSSは親のブロック(グループ)に書いています。
・%で指定したのは、パソコンやスマホなど画面サイズが変わっても縦横比が保てる
・bottom: 0px;で指定したかったのは、どの画面サイズでもエリアの一番下に表示できる
と考えました。ただ、その後4つの画像の大きさを画面サイズ別に変える必要が出てきたので、現在は、以下のように画面サイズ別にTopからの高さを指定(例:top: 20px;)しています。
@media (max-width: 575.98px) { /* モバイル */ selector { position: relative; left:0px; width: 100%; height: 400px; } .photo_1 { position: absolute; top: 0px; left:0%; width: 31%; z-index : 90; } .photo_2 { position: absolute; top: 20px; left:15%; width: 60%; z-index : 100; } .photo_3 { position: absolute; top: 70px; right:5%; width: 30%; z-index : 110; } .photo_4 { position: absolute; top: 35px; right: 0px; width: 60%; z-index : 10; } .text_top { position: absolute; top: 200px; width: 100%; z-index : 40; } } @media (min-width: 576px) and (max-width: 991.98px) { /* タブレット */ selector { position: relative; left:0px; width: 100%; height: 450px; } .photo_1 { position: absolute; top: 0px; left:10%; width: 31%; z-index : 90; } .photo_2 { position: absolute; top: 48px; left:33%; width: 49%; z-index : 100; } .photo_3 { position: absolute; top: 180px; left:77%; width: 18%; z-index : 110; } .photo_4 { position: absolute; top: 75px; right: 0px; width: 49%; z-index : 10; } .text_top { position: absolute; top: 310px; width: 100%; z-index : 40; } } @media (min-width: 992px) { /* PC */ selector { position: relative; left:0px; width: 100%; height: 480px; } .photo_1 { position: absolute; top: 0px; left:10%; width: 31%; z-index : 90; } .photo_2 { position: absolute; top: 48px; left:33%; width: 49%; z-index : 100; } .photo_3 { position: absolute; top: 250px; left:77%; width: 18%; z-index : 110; } .photo_4 { position: absolute; top: 75px; right: 0px; width: 49%; z-index : 10; } .text_top { position: absolute; top: 330px; width: 40%; z-index : 40; } }
bottom: 0px;の表示がおかしくなる問題は解決していませんが、取り急ぎなんとかなりました。
-
投稿者投稿
- このトピックに返信するにはログインが必要です。
- トピックタグ
- CSS