スライドショウ画像に絶対配置で文字を配置しているのですが、スマホなどで文字が消えてしまう。

Question

Bootstrap のUIキットを利用してWEBサイトを制作しています。
TOPページのスライドショウ画像に文字を乗せているのですが、
スマホや画面の小さいデバイスの際に、文字が消えてしまいます。
絶対配置で配置しているのですが、数値を調整しても文字が表示されません。

  <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner shadow-sm rounded">
      <div class="carousel-item active">
        <img class="d-block w-100" src="assets/img/type.png" alt="First slide">
        <div id="carousel-caption-1st" class="carousel-caption d-none d-md-block">
          <h1 class="text-right"><strong>これは</strong><br />
          <strong>スライド画像1枚目です。</strong></h1>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="assets/img/park.png" alt="Second slide">
        <div id="carousel-caption-2nd" class="carousel-caption d-none d-md-block">
          <h1 class="text-right"><strong>これは</strong><br />
          <strong>スライド画像2枚目です。</strong></h1>
        </div>
      </div>
    </div>
  </div>

CSSはこんな感じです。
数値を調整をしながら表示を試みています。

/*スマホのたての時（表示されない） */
#carousel-caption-1st {
  position: absolute;
  right: 5%;
  top: 20px;
  left: 5%;
  z-index: 10;
  padding-top: 10px;
  padding-bottom: 5px;
  color: #FFF;
  text-align: right;
}

#carousel-caption-2nd {
  position: absolute;
  right: 5%;
  top: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #FFF;
  text-align: right;
}

/*576pxスマホ横（表示されない）*/
@media (min-width: 576px) {
  #carousel-caption-1st {
    position: absolute;
    right: 5%;
    top: 10px;
    left: 15%;
    z-index: 10;
    color: #FFF;
    text-align: right;

  }

  #carousel-caption-2nd {
    position: absolute;
    right: 5%;
    top: 10px;
    left: 15%;
    z-index: 10;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #FFF;
    text-align: right;

  }
}

/*768px以上タブレット横（表示されます）*/
@media (min-width: 768px) {
  #carousel-caption-1st {
    position: absolute;
    right: 5%;
    top: 250px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #FFF;
    text-align: right;
  }

  #carousel-caption-2nd {
    position: absolute;
    right: 5%;
    top: 80px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #FFF;
    text-align: right;
  }
}

/*992x以上PC小型（表示されます）*/
@media (min-width: 992px) {
  #carousel-caption-1st {
    position: absolute;
    right: 5%;
    top: 350px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #FFF;
    text-align: right;
  }

  #carousel-caption-2nd {
    position: absolute;
    right: 5%;
    top: 120px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #FFF;
    text-align: right;
  }
}

/*1200px以上大型スクリーン（表示されます）*/
@media (min-width: 1200px) {
  #carousel-caption-1st {
    position: absolute;
    right: 5%;
    top: 350px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #FFF;
    text-align: right;
  }

  #carousel-caption-2nd {
    position: absolute;
    right: 5%;
    top: 120px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #FFF;
    text-align: right;
  }
}

Topの部分を調整すれば表示されるとは思っていたのですが、そうもいかず悩んでいます。
宜しくお願いいたします。

Comments

[azuapricot]

全部にposition:absolute使ってますがちゃんと挙動を理解して使用していますよね？

[hidepon]

理解しているつもりですが、、、、不慣れな部分でもあるので、教えて頂ければ幸いでございます。

Answer 1

HTML部分の
d-md-block
を
d-block
に修正して、
CSSのTOPの数値やfont-sizeを調整して実現できました。
有難うございました。

Answer 2

position: relative;は入っていますか？
記述が無い場合は、ブラウザの左上が起点になってしまいます。
起点にしたい親要素にposition: relative;を追加してから調整したら上手くいくと思います。
.carousel-itemを起点にする場合↓

.carousel-item {
    position: relative;
}

原因がこれじゃなかったらすみません。

Comments

[hidepon]

うまくいかないですね。。。。。ちなみに、media query の中に上記のrelativeを入れるということでしょうか？？？

[achamaru]

言葉足らずでした(>_<)
各media query内のposition: absoluteを持つ子要素が、全て同じ親要素を起点にするなら、positon: relativeはmedia queryの外に一個だけ書けばOKです。