流体の上に2つのテキストボックスを置く方法img？ 1つ左上、もう1つ下の右 - スクリーンショットを参照

Question

2つのテキストボックスをブートストラップ4のimg-fluidとしてテーブルにオーバーレイします。 最初のテキストボックスは、左上にあり、イメージを約5％オーバーラップします。 もう1つは右下にあり、約5％もオーバーラップしている必要があります。

あなたはこのスクリーンショットでは、ここで見ることができます：layout

私はいくつかのソリューションをしようと、誰もが働きません....ここ

はhtmlコードです：

<div class="jumbotron jumbotron-fluid jumbotron-no-padding"> 
     <div class="jumbotron-img"> 


      <div class="jumbotron-img-caption-top"> 
       <h1>Hotel + Restaurant <span class="fraktur">Bürgerhof Wetzlar</span></h1> 
      </div> 

      <img src="img/wetzlar_full.jpg" class="img-fluid"> 

      <div class="jumbotron-img-caption-bottom"> 
       <h1>der perfekte Start für Ihre Tour in und um Wetzlar!</h1> 
      </div> 

     </div> 
    </div> 

、ここでCSS：

.jumbotron-no-padding { 
     padding: 0px!important; 
    } 

    .jumbotron-img { 
      position: relative; 
    } 

    .jumbotron-img img{ 
      position: absolute; 
      top: 5%; 
    } 

    .jumbotron-img-caption-top { 
      position: absolute; 
      top: 0%; 
      right: 20rem; 
      width: 100%;  
      background-color: #fff1c2; 
      padding: 1.5rem; 
      padding-left: 21.5rem; 
    } 
    .jumbotron-img-caption-bottom { 
      position: absolute; 
      top: 95%; 
      left: 20rem; 
      width: 100%;  
      background-color: #fff1c2; 
      padding: 1.5rem; 
    } 

    .jumbotron-imgn h2 { 
     line-height: 3rem; 
     vertical-align: middle 
    } 

誰か助けてもらえますか？

Answer 1

このような場合はどうですか。テキストラッパーをwidth:autoに設定し、その位置を左または右に設定しています。上または下を0に設定してから​​を使用して、テキストラッパーの高さを補正します。

.jumbotron-img imgから絶対位置を削除しました。なぜなら、必要ではないように見えて、絶対配置された子要素が正しく配置されないように、高さが崩壊していたからです。.jumbotron-img

body { 
 
    padding-top:100px; 
 
    padding-bottom:100px; 
 
    margin:0; 
 
} 
 
img { 
 
    max-width:100%; 
 
    height:auto; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.jumbotron-no-padding { 
 
    padding: 0px!important; 
 
} 
 

 
.jumbotron-img { 
 
    position: relative; 
 
} 
 

 
.jumbotron-img-caption-top { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width:auto; 
 
    background-color: #fff1c2; 
 
    padding: 1.5rem; 
 
    transform: translateY(-50%); 
 
} 
 
.jumbotron-img-caption-bottom { 
 
    position: absolute; 
 
    top: 100%; 
 
    transform: translateY(-50%); 
 
    right:0; 
 
    width: auto; 
 
    background-color: #fff1c2; 
 
    padding: 1.5rem; 
 
} 
 

 
.jumbotron-imgn h2 { 
 
    line-height: 3rem; 
 
    vertical-align: middle 
 
}

<div class="jumbotron jumbotron-fluid jumbotron-no-padding"> 
 
    <div class="jumbotron-img"> 
 
    <div class="jumbotron-img-caption-top"> 
 
     <h1>Hotel + Restaurant <span class="fraktur">Bürgerhof Wetzlar</span></h1> 
 
    </div> 
 

 
    <img src="https://dummyimage.com/1920x1080/000000/0011ff" class="img-fluid"> 
 

 
    <div class="jumbotron-img-caption-bottom"> 
 
     <h1>der perfekte Start für Ihre Tour in und um Wetzlar!</h1> 
 
    </div> 
 
    </div> 
 
</div>