Question

絶対配置された要素内にアタッチするh2ヘッダーを取得できません。私は考えられるエラーのリストを調べましたが、答えを見つけることができないようです。 h2要素は、画面を検査した後、何らかの理由で高さが0になります。

Here's a codepen link

HTML：

<div class="gallery"> 

     <img class='gallery-image' src='https://dummyimage.com/200x400/000000/ffffff'> 
     <img class='gallery-image' src='https://dummyimage.com/200x400/000000/ffffff'> 
     <img class='gallery-image' src='https://dummyimage.com/200x400/000000/ffffff'> 
     <img class='gallery-image' src='https://dummyimage.com/200x400/000000/ffffff'> 
     <a class='call-action' href='#'> 
     <h2>Shop Now.</h2> 
     </a> 
    </div> 

CSS：答えは明白である場合

.gallery { 

    position: absolute; 
    z-index: 2; 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
    font-size: 0; 

    img { 

    display: block; 
    width: 25%; 
    height: 50%; 

    @media only screen and (max-width: 500px) { 

     width: 50%; 
     height: 100%; 

    } 

    } 

} 

$call-action-width: 150px; 
$call-action-height: 50px; 

.call-action { 

    width: $call-action-width; 
    height: $call-action-height; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 0; 
    background-color: white; 
    opacity: 0.5; 
    border-radius: 5%; 

    h2 { 

    position: relative; 
    color: black; 
    font-size: 2em; 

    } 

} 

申し訳ありません - 私はコーディングの練習に戻ってきたと私は非常にラフです。

ありがとうございました！

Answer 1

問題はfont-sizeにあります。 emは親の要素に関連しているので、emフォントをposition: absolute<div>に含めることはできません。

固定サイズフォント（pxなど）にスワップするだけで問題が解決されます。私はこれを示す新しいペンを作成しましたhere。

残念ながら、これはあなたのフォントが応答できないことを意味します。レスポンスフォントを使用するには、いくつかのメディアクエリを使用するか、または<h2>要素がposition: relativeの親要素を持つようにHTMLを再構成する必要があります（emを使用できるため）。

希望すると便利です。 :)