質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2222閲覧

画像を一番下に設置したいのですが、position:absoluteで上手くいきません

takawork

総合スコア95

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/05 12:31

編集2021/01/05 14:14

イメージ説明
白熊のした部分の平行線を、レスポンシブで縮めたり伸ばしたりしても、濃い水色部分の平行線と常にくっついてる状態にしたいのですがうまくいきません。
position:absolute;でbottom:-13px;にしてあげると上手く行くかと思いましたが、
これをするとテキストが左に来てしまったり、熊がセクションの上の壁を突き抜けてしまいます。

イメージ説明

熊と同じ高さにして、レスポンシブで縮めると、テキストが熊の上に来るようにしたいと思っています。
でもまず、熊のポジションをうまく移動させたいのですが、上記のような状態です。
お手数ですがよろしくお願いします。

追記画像
イメージ説明

<section class="profile-mv"> <div class="profile-mv-wrap"> <div class="profile-mv-wrap-left"> <img src="//img/kuma.png"> </div> <div class="profile-mv-wrap-right"> <h1>ああああ<br>ああああああああ</h1> </div> </div> </section>
.profile-mv { height: auto; background-color: skyblue; padding-top: 30px; } .profile-mv-wrap { max-width: 1080px; margin: 0 auto; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .profile-mv-wrap-left img { position: absolute; bottom: -20px; } .profile-mv-wrap-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .profile-mv-wrap-right h1 { font-size: 56px; font-weight: bold; text-align: center; color: white; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

position:absolute;を設定した要素は浮いた状態になるので、他の要素が裏に回り込みます。

position:absolute; はやめて、flex でレイアウトを決めるとうまくいきます。

css

1.profile-mv { 2 height: auto; 3 background-color: skyblue; 4 padding-top: 30px; 5} 6 7.profile-mv-wrap { 8 max-width: 1080px; 9 margin: 0 auto; 10 display: flex; 11} 12 13/* 下記追加 */ 14.profile-mv-wrap-left { 15 display: flex; 16 align-items: flex-end; /* 下揃え */ 17} 18 19.profile-mv-wrap-right { 20 display: flex; 21 align-items: center; 22} 23 24.profile-mv-wrap-right h1 { 25 font-size: 56px; 26 font-weight: bold; 27 text-align: center; 28 color: white; 29}

投稿2021/01/05 13:14

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takawork

2021/01/05 14:19

回答ありがとうございます。align-items: flex-end;を追加した場合の画像を追加しました。 理想としては、2枚目の画像のように、手の部分が次のセクションに重なってるようにしたいのですが、 align-items: flex-end;だと手の先っちょに合わせて、画像が下にくっつくので上手く行ってないっぽいです。。。
takawork

2021/01/05 14:24

align-items: flex-end;で一旦下に固定して、そこからbottom:-13px;とかで下げればいいかなと思いましたが、bottomはやっぱり効きませんでした。
hatena19

2021/01/05 16:18

ネガティブマージンで移動させればいいでしょう。 margin-bottom: -13px;
takawork

2021/01/05 16:48

ありがとうございます。うまく行きました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問