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

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

ただいまの
回答率

89.99%

position:absolute;を指定した小要素の高さが計算されてしまう。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,268

-1an.vvks-

score 69

position:absolute;を指定した小要素の高さが計算されてしまう。

サムネイルにclick/mouseonで、画像が表示されるやつです。

<!DOCTYPE html>

<html>

    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <style>
            *{
                box-sizing:border-box;
                margin:0;
                padding:0;
                }
            body{
                display:flex;
                flex-wrap:wrap;
                align-content:flex-start;
                width:100vw;
                background:#ddd;
                padding:10px;
                overflow:auto;
                }
            h1,hr{width:100%;}

            .wrap{
                box-sizing:content-box;
                position:relative;
                display:flex;
                flex-wrap:wrap;
                align-content:flex-start;
                max-width:700px;
                border:1px solid #888;
                margin:2em auto;
                background:green;
                }

            .wrap img{
                display:block;
                width:100%;
                }

            .thumb{
                flex: 1 1 auto;
                width:30%;
                border:1px solid #ccc;
                }

            .img{
                flex: 1 1 auto;
                width:100%; 
                transition:0.1s;
                opacity:0;
                border:1px solid #ccc;
                }
            #img000{
                /*position:absolute;*//*この記述はいらないはず*/
                /*bottom:0;*//*この記述はいらないはず*/
                opacity:1;
                }
            #img001,
            #img003,
            #img004,
            #img005,
            #img006{
                position:absolute;
                bottom:0;
                }

            #thumb001input,
            #thumb002input,
            #thumb003input,
            #thumb004input,
            #thumb005input,
            #thumb006input{display:none;}

            #thumb001input:checked ~ #img001,
            #thumb002input:checked ~ #img002,
            #thumb003input:checked ~ #img003,
            #thumb004input:checked ~ #img004,
            #thumb005input:checked ~ #img005,
            #thumb006input:checked ~ #img006{opacity:1;z-index:100;}
            #thumb001:hover ~ #img001,
            #thumb002:hover ~ #img002,
            #thumb003:hover ~ #img003,
            #thumb004:hover ~ #img004,
            #thumb005:hover ~ #img005,
            #thumb006:hover ~ #img006{opacity:1;z-index:101;}

        </style>
    </head>

    <body>

        <h1>demo</h1>

        <hr>
        <style>
            #tab01in,#tab02in{display:none;}
            #tab01,#tab02{
                flex: 1 1 auto;
                width:45%;
                color:#ccc;
                font-size:20px;
                text-align:center;
                padding:1em;
                margin-right:1px;
                background:#eee;
                transition:0.1s;
                }
            #tab02{margin:0;}

            #tab_cont1,
            #tab_cont2{
                display:none;
                flex: 1 1 auto;
                width:90%;
                background:#fff;
                }

            #tab01in:checked ~ #tab01,
            #tab02in:checked ~ #tab02{
                color:#555;
                outline: 1px solid #ddd;
                outline-offset: -3px;
                background:#fff;
                }

            #tab01in:checked ~ #tab_cont1,
            #tab02in:checked ~ #tab_cont2{
                display:block;
                }

        </style>
        <input id="tab01in" type="radio" name="tab_radio" checked="checked"></input>
        <label for="tab01in" id="tab01">Pattern1</label>
        <input id="tab02in" type="radio" name="tab_radio"></input>
        <label for="tab02in" id="tab02">Pattern2</label>

        <div id="tab_cont1">

        <style>

        </style>

        <div class="wrap">
            <input id="thumb001input" type="radio" name="myradio2"></input>
            <label for="thumb001input" id="thumb001" class="thumb">
                <img src="1.png">
            </label>
            <input id="thumb002input" type="radio" name="myradio2"></input>
            <label for="thumb002input" id="thumb002" class="thumb">
                <img src="2.png">
            </label>
            <input id="thumb003input" type="radio" name="myradio2"></input>
            <label for="thumb003input" id="thumb003" class="thumb">
                <img src="3.png">
            </label>
            <input id="thumb004input" type="radio" name="myradio2"></input>
            <label for="thumb004input" id="thumb004" class="thumb">
                <img src="4.png">
            </label>
            <input id="thumb005input" type="radio" name="myradio2"></input>
            <label for="thumb005input" id="thumb005" class="thumb">
                <img src="5.png">
            </label>
            <input id="thumb006input" type="radio" name="myradio2"></input>
            <label for="thumb006input" id="thumb006" class="thumb">
                <img src="6.png">
            </label>
            <div id="img000" class="img"><img src="0.png"></div>
            <div id="img001" class="img"><img src="1.png"></div>
            <div id="img002" class="img"><img src="2.png"></div>
            <div id="img003" class="img"><img src="3.png"></div>
            <div id="img004" class="img"><img src="4.png"></div>
            <div id="img005" class="img"><img src="5.png"></div>
            <div id="img006" class="img"><img src="6.png"></div>
        </div>

        </div>

        <div id="tab_cont2">

        <style>

        </style>

        another content

        </div>

        <hr>

    </body>

</html>

ほんとは「0」の画像の上に「1」〜「6」の画像がかぶるはず(小要素にposition:absolute;を指定すると、親要素はその子要素の大きさを無視したサイズで描画される)

でも、実際にはしっかりと小要素の高さが算出されてしまっています。

cssでコメントアウトした部分を有効にすれば、期待通りの表示にはなりますが、この方法は個人的にしっくりきません。

どなたか原因に心当たりはないでしょうか。

現物はこちら

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+4

引用テキスト■class:
「種別名を割り当てる」
→ 同じclass名を、1ページ中に何度でも使える
■id:
「固有の名前を割り当てる」
→ 同じid名は、1ページ中に1度しか使えない
class属性が対象の「種類・部類」を表しているに過ぎないのに対して、id属性は対象に「固有の名前」を付けて一意に表すために使われます。ですから、1ページ中に同じid名は1度しか使えません。

同じ人に同じこと言うと思わなかった。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/17 23:28

    すみません。実はあれ、わざとなんです。(ホントは手直しするのが面倒で放置してるだけです。(_ _;))

    いま時間が空いたので、手直ししときます。

    キャンセル

+3

  • 不要なタグ、意味のないタグの消去。
  • idの重複があったのでclassにする。
  • CSSはできるかぎり一箇所にまとめる。
  • input要素の閉じタグは不要なので削除。

以上を修正しましたが、この動作のどのあたりが質問の内容にあたるのでしょうか?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>タイトル</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            width: 100vw;
            background: #ddd;
            padding: 10px;
            overflow: auto;
        }

        h1, hr {
            width: 100%;
        }

        .wrap {
            box-sizing: content-box;
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            max-width: 700px;
            border: 1px solid #888;
            margin: 2em auto;

            background: green;
        }

        .wrap img {
            display: block;
            border: 1px solid #eee;
            width: 100%;
        }

        .thumb {
            flex: 1 1 auto;
            width: 30%;
            border: 1px solid #555;
        }

        .thumb001 {
            background: azure;
        }

        .thumb002 {
            background: lightYellow;
        }

        .thumb003 {
            background: pink;
        }

        .thumb004 {
            background: red;
        }

        .thumb005 {
            background: green;
        }

        .thumb006 {
            background: blue;
        }

        .img {
            flex: 1 1 auto;
            width: 100%;
            transition: 0.1s;
            opacity: 0;

            border: 1px solid #555;
        }

        .img000 {
            opacity: 1;
            display: none;
        }

        .img001,
        .img003,
        .img004,
        .img005,
        .img006 {
            position: absolute;
            bottom: 0;
        }

        .thumb001input,
        .thumb002input,
        .thumb003input,
        .thumb004input,
        .thumb005input,
        .thumb006input {
            display: none;
        }

        .thumb001input:checked ~ .img001,
        .thumb002input:checked ~ .img002,
        .thumb003input:checked ~ .img003,
        .thumb004input:checked ~ .img004,
        .thumb005input:checked ~ .img005,
        .thumb006input:checked ~ .img006 {
            opacity: 1;
            z-index: 100;
            display: block;
        }

        .thumb001:hover ~ .img001,
        .thumb002:hover ~ .img002,
        .thumb003:hover ~ .img003,
        .thumb004:hover ~ .img004,
        .thumb005:hover ~ .img005,
        .thumb006:hover ~ .img006 {
            opacity: 1;
            z-index: 101;
        }

        .tab01in, .tab02in {
            display: none;
        }

        .tab01, .tab02 {
            flex: 1 1 auto;
            width: 45%;
            color: #ccc;
            font-size: 20px;
            text-align: center;
            padding: 1em;
            margin-right: 1px;
            background: #eee;
            transition: 0.1s;
        }

        .tab02 {
            margin: 0;
        }

        .tab_cont1,
        .tab_cont2 {
            display: none;
            flex: 1 1 auto;
            width: 90%;
            background: #fff;
        }

        .tab01in:checked ~ .tab01,
        .tab02in:checked ~ .tab02 {
            color: #555;
            outline: 1px solid #ddd;
            outline-offset: -3px;
            background: #fff;
        }

        .tab01in:checked ~ .tab_cont1,
        .tab02in:checked ~ .tab_cont2 {
            display: block;
        }
    </style>
</head>
<body>
<h1>demo</h1>
<hr>
<input class="tab01in" type="radio" name="tab_radio" checked="checked">
<label class="tab01">Pattern1</label>
<input class="tab02in" type="radio" name="tab_radio">
<label class="tab02">Pattern2</label>
<div class="tab_cont1">
    <div class="wrap">
        <input class="thumb001input" type="radio" name="myradio2">
        <label class="thumb001 thumb">
            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1">
        </label>
        <input class="thumb002input" type="radio" name="myradio2">
        <label class="thumb002 thumb">
            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image2">
        </label>
        <input class="thumb003input" type="radio" name="myradio2">
        <label class="thumb003 thumb">
            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image3">
        </label>
        <input class="thumb004input" type="radio" name="myradio2">
        <label class="thumb004 thumb">
            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image4">
        </label>
        <input class="thumb005input" type="radio" name="myradio2">
        <label cla4s="thumb005 thumb">
            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image5">
        </label>
        <input class="thumb006input" type="radio" name="myradio2">
        <label class="thumb006 thumb">
            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image6">
        </label>
        <div class="img000 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image0"></div>
        <div class="img001 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1"></div>
        <div class="img002 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image2"></div>
        <div class="img003 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image3"></div>
        <div class="img004 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image4"></div>
        <div class="img005 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image5"></div>
        <div class="img006 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image6"></div>
    </div>
</div>
<div class="tab_cont2">
    <div class="wrap">
        <input class="thumb001input" type="radio" name="myradio2">
        <label class="thumb001 thumb">a</label>
        <input class="thumb002input" type="radio" name="myradio2">
        <label class="thumb002 thumb">b</label>
        <input class="thumb003input" type="radio" name="myradio2">
        <label class="thumb003 thumb">c</label>
        <input class="thumb004input" type="radio" name="myradio2">
        <label class="thumb004 thumb">d</label>
        <input class="thumb005input" type="radio" name="myradio2">
        <label class="thumb005 thumb">e</label>
        <input class="thumb006input" type="radio" name="myradio2">
        <label class="thumb006 thumb">f</label>
        <div class="img000 img"></div>
        <div class="img001 img"></div>
        <div class="img002 img"></div>
        <div class="img003 img"></div>
        <div class="img004 img"></div>
        <div class="img005 img"></div>
        <div class="img006 img"></div>
    </div>
</div>
<hr>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/17 23:59

    と思ったら回答文を書いている間に質問が修正されたようですね。失礼しました。

    キャンセル

  • 2017/03/18 00:09 編集

    わざわざコードを修正いただきありがとうごさいます。

    問題の箇所は、.img000〜.img006が表示される部分です。

    position:absolute;の力によって、.img001〜.img006がfloatされたみたいになって、.img000の上に重なるのが理想なのですが、そのように動作しません。

    divタグではなく、imgタグだけでマークアップしてたときには、ちゃんとimg001-006がimg000の上に浮いていたのですが、色々手を加えてみたら、いつの間にかabsoluteされていないみたいな表示をされるようになっていました。

    top:0;
    なら、ちゃんと浮くのに
    bottom:0;
    だと、staticみたいな挙動になるので、「なんだこれ?!」という状況です。

    キャンセル

checkベストアンサー

+1

        .img001,
        .img003,
        .img004,
        .img005,
        .img006 {
            position: absolute;
            bottom: 0;
        }

ここに .img002 が指定されていないのが原因だと思います

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/15 20:19

    なんで気付かなかったのか... orz
    とにかくありがとうございます.

    キャンセル

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる