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

VWSとは フォーラム Lightning [ 解決済 ] CSSでbottom: 0px;を指定した時の表示について

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

タグ: 

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #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を指定したら、青いボックスの上側に接して画像が表示される。

    #79825

    うなこ
    モデレーター
    selector {
    position: relative;
    width: 100%;
    height: 77%;
    background-color: blue;
    }

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

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

    #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;の表示がおかしくなる問題は解決していませんが、取り急ぎなんとかなりました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。