position:absoluteで、複数枚の画像を希望の位置に配置したいです。

はじめまして
最近コーディングをはじめた初心者のため、初歩的な質問かもしれないのですが
調べてみても解決ができず。
ご教示いただければ、ありがたいです。
どうぞよろしくお願い致します。

前提・実現したいこと

header部分
レスポンシブで、３枚の画像を配置したいです。
イメージとしては、以下です。
左に縦長画像１つ（400×714となっている画像）_Aとします。
右に画像２つを縦に並べる（400×391、400×456となっている画像）_B、Cとします。

ブレイクポイントは３つ指定しています。

発生している問題

AとBは、position:absoluteでtopからの位置を%指定しています。
問題が、C（400×456となっている画像）で、
ブラウザの幅を変えると、Bと重なってしまったりBとCの間にかなり余白が空いてしまったり。。。

画像Cのtopからの位置はどう指定すればよいのかわからず、とりあえず適当な%指定をしています。

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<style>
body {
background: #fff;
color: #101010;
font-family: sans-serif;
line-height: 2;
font-size: 1.4rem;
}

main, article {
width: 100%;
margin: 0 auto;
}

section {
margin: 80px auto 0;
}

img{
border: 0;
width: 100%;
height: auto;
}

/*container*/
.container {
max-width: 1120px;
margin: 0 auto;
padding: 0 15px;
}
.container::after {
content: "";
display: block;
clear: both;
}

.header {
    text-align: center;
    }

.header__img {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding-bottom: 100%;
    }
.header__img01 {
        position: absolute;
        top: 8%;
        left: 0.021%;
        right: 49.866%;
    }
.header__img02 {
        position: absolute;
        top: 0;
        left: 50.133%;
        right: 0.021%;
    }
.header__img03 {
        position: absolute;
        top: 48%;
        left: 50.133%;
        right: 0.021%;
    }

@media screen and (max-width: 959px) and (min-width: 600px){
    .header__img {
            position: relative;
            max-width: 480px;
        }
    .header__img03 {
            position: absolute;
            left: 50.133%;
            right: 0.021%;
            top: 52%;
        }
    }

@media screen and (min-width: 960px) {
    .header__img {
            position: relative;
            max-width: 600px;
            padding-bottom: 54%;          
        }
    .header__img03 {
            position: absolute;
            left: 50.133%;
            right: 0.021%;
            top: 52%;
        }
    }

.lead-grid {
    text-align: center;
}
</style>
</head>

<body>
    <header  class="header">
        <div class="container">                
            <h1>
               TITLE
            </h1>
            <div class="header__img">
                <p class="header__img01">
                    <img src="https://placehold.jp/400x714.png" alt="">
                </p>
                <p class="header__img02">
                    <img src="https://placehold.jp/400x391.png" alt="">
                </p>
                <p class="header__img03">
                    <img src="https://placehold.jp/400x456.png" alt="">
                </p>
            </div>
        </div>
    </header>
    <!-- /header -->
            
        
    <section class="lead-grid">
        <h2>About</h2>                 
    </section>
    </body>
</html>

試したこと

position:absoluteで、要素の高さはなくなるということは理解できているのですが
希望の位置に画像を固定させるためには、どうすればよいのか理解できておらずです。
高さをだすために、paddint-bottom:100%を使う書いてあるサイトがあったので
とりあえず,header__img部分に指定してみたのですが、
ブラウザ幅を変えてみてみると、次のsection、lead-gridとの間に余白が空きすぎてしまいました。

その他追記

display:inline-blockなどを使えば実装は可能だと思うのですが
画像同士を重ならせたい場合など、複数の画像を希望の位置に配置したい場合についての
解決方法をご教示いただければありがたいです。

yoshinavi

2019/03/28 22:27

現状と希望するレイアウトを、スクショや、手書きでも良いので、イメージ図等を併せて提示されると良いかと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

いまいち理解できていませんが、「品」の字を反時計回りに90度回転させ、
その中にある「口」同士の隙間をなくす。
さらに、左側は右側の画像2つの高さを基準に縦位置中央へ。
ブラウザサイズが小さくなればその分、画像も縮小表示させる。
画像の最大表示は実寸を超えない。
って理解なんですが間違ってたらごめんなさい。

上記の通りであれば、以下のように。

CSS
1.header__img {
2  margin:0 auto;
3  width:90%;
4  max-width:800px;
5}
6.header__img > ul {
7  display:flex;
8  flex-flow:row wrap;
9  align-items:center;
10  list-style-type:none;
11}
12.header__img > ul > li {
13  width:50%;
14}
15.header__img > ul > li > ul {
16  display:flex;
17  flex-direction:column;
18  list-style-type:none;
19}
20.header__img > ul > li > ul > li {
21  width:100%;
22}
23.header__img li {
24  line-height:0;
25  font-size:0;
26}

HTML
1<div class="header__img">
2  <ul>
3    <li><img src="https://placehold.jp/400x714.png" alt=""></li>
4    <li>
5      <ul>
6        <li><img src="https://placehold.jp/400x391.png" alt=""></li>
7        <li><img src="https://placehold.jp/400x456.png" alt=""></li>
8      </ul>
9    </li>
10  </ul>
11</div>

CSSは変更点のみ
HTMLは.header__img内のみ

レスポンシブ記述はこの場合必要ありません。
<li>に対しては、おそらくbodyに記述されているline-heightとfont-sizeが
影響していると思いますが、上記の記述が無いと、画像の下に隙間ができます。

追記：

必要性が全く感じられないんだけどな～。

CSS
1.header__img {
2  margin:0 auto;
3  width:90%;
4  max-width:800px;
5}
6.header__img ul {
7  position:relative;
8  padding-bottom:105.875%;
9  width:100%;
10  height:0;
11  list-style-type:none;
12}
13.header__img ul li {
14  position:absolute;
15  width:50%;
16  line-height:0;
17  font-size:0;
18}
19.header__img ul li:nth-child(1) {
20  left:0;
21  top:50%;
22  transform:translateY(-50%);
23}
24.header__img ul li:nth-child(2) {
25  left:50%;
26  top:0;
27}
28.header__img ul li:nth-child(3) {
29  left:50%;
30  bottom:0;
31}

HTML
1<div class="header__img">
2  <ul>
3    <li><img src="https://placehold.jp/400x714.png" alt=""></li>
4    <li><img src="https://placehold.jp/400x391.png" alt=""></li>
5    <li><img src="https://placehold.jp/400x456.png" alt=""></li>
6  </ul>
7</div>

こんな感じですね。
右側の2つは、本来ならright:0;で指定するのが普通ですが、
ブラウザの拡大縮小時、画像同士の隙間が出来やすいので、left:50%;にしています。

投稿2019/03/28 14:16

編集2019/03/29 06:59

LibertyBell3

総合スコア1084

machi__bari

2019/03/28 14:29 編集

ご教示いただきありがとうございます！質問後に、よくよく考えてみたら、flexboxやinline-blockを使えば実装は可能なことに気づきました。。。画像を希望の位置に配置したい=positionで配置しなければ。と思い込んで、難しく考えすぎていました。。。ご教示いただいた、flexboxでの指定方法、とても分かりやすいです。 flexboxも最近使い始めたばかりなので、勉強になります。ありがとうございます。ただ、今後の勉強のためにも、positionを使用した場合の指定方法も知れたらうれしいです。

machi__bari

2019/03/29 10:31

頂いたコードを色々と触ってみて、なんとなく理解できたような気がします。とても勉強になりました何度もご教示いただき、誠にありがとうございました！

行動規範の内容に同意します