[ 解決済 ] CSSでbottom: 0px;を指定した時の表示について

[博之上田]

■ 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を指定したら、青いボックスの上側に接して画像が表示される。

[うなこ]

selector {
position: relative;
width: 100%;
height: 77%;
background-color: blue;
}

　このCSSは親のブロックに書いてあるということですよね。
（画像ブロックをグループブロックなどで囲っている状態）

heightをpx指定にしてみるといかがでしょうか？例えば600pxにしてみてください。

[博之上田]

うなこさま
返信ありがとうございます。

ご推察の通り、CSSは親のブロック（グループ）に書いています。
・％で指定したのは、パソコンやスマホなど画面サイズが変わっても縦横比が保てる
・bottom: 0px;で指定したかったのは、どの画面サイズでもエリアの一番下に表示できる
と考えました。

ただ、その後４つの画像の大きさを画面サイズ別に変える必要が出てきたので、現在は、以下のように画面サイズ別に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;の表示がおかしくなる問題は解決していませんが、取り急ぎなんとかなりました。

[投稿者]

投稿