テキストが正しい位置に配置されないテキスト

Question

スタックオーバーフローコミュニティ

プレースホルダイメージで現在埋め込まれているビデオの例につながるタイルシステムを設定しようとしています。イメージの上にテキストを配置しようとしています。ここに私の現在の問題は、次のとおりです。

HTML

<section id="video-section" class="portfolio"> 
    <div class="big-container"> 
     <div class="row"> 
      <div class="col-lg-10 col-lg-offset-1 text-center"> 
       <h2>Video Production</h2> 
       <hr class="small"> 
      </div> 
      <div class="container-fluid full-width has-inner"> 
       <div class="row no-gutter"> 
        <div class="col-md-4 nogut"> 
         <div id="image1" class="video-item"> 
          <a href="https://vimeo.com/208403633"> 
           <img id="portfolio1" class="img-full-width" src="img/image1.jpg"> 
          </a> 
          <p class="text"> Image 1 </p> 
         </div> 
        </div> 
        <div class="col-md-4 nogut"> 
         <div id="image2" class="video-item"> 
          <a href="#"> 
           <img class="img-full-width" src="img/image2.jpg"> 
          </a> 
          <p class="text"> Image 2 </p> 
         </div> 
        </div> 
        <div class="col-md-4 nogut"> 
         <div id="image3" class="video-item"> 
          <a href="#"> 
           <img class="img-full-width" src="img/image3.jpg"> 
          </a> 
          <p class="text"> Image 3 </p> 
         </div> 
        </div> 
       </div> 
       <div class="row no-gutter"> 
        <div class="col-md-4"> 
         <div id="image4" class="video-item"> 
          <a href="#"> 
           <img class="img-full-width" src="img/image4.jpg"> 
          </a> 
          <p class="text"> Image 4 </p> 
         </div> 
        </div> 
        <div class="col-md-4"> 
         <div id="image5" class="video-item"> 
          <a href="#"> 
           <img class="img-full-width" src="img/image5.jpg"> 
          </a> 
          <p class="text"> Image 5 </p> 
         </div> 
        </div> 
        <div class="col-md-4"> 
         <div id ="image6" class="video-item"> 
          <a href="#"> 
           <img class="img-full-width" src="img/image6.jpg"> 
          </a> 
          <p class="text"> Image 6 </p> 
         </div> 
        </div> 

       </div> 
       <!-- /.row (nested) --> 
      </div> 
      <!-- /.container-fluid --> 
     </div> 
     <!-- /.row --> 
    </div> 
    <!-- /.container --> 
</section> 

CSS

#video-section { 
    padding: 0px; 
    background: #353030; 
    color: white; 
} 
.big-container { 
    padding: 0px; 
} 

.containter-fluid .full-width { 
    padding-left: 0px; 
    padding-right: 0px; 
} 

.no-gutter > [class*='col-'] { 
    padding-right: 0px; 
    padding-left: 0px; 
    padding-bottom: 0px; 
} 


.img-full-width { 
    width: 100.5%; 
    height: auto; 
} 

.video-item { 
    padding: 0px; 
} 

.text { 
    position: absolute; 
    z-index: 100; 
} 

私が間違ってやっている上の任意のアイデア？どんな助けも素晴らしいだろう、ありがとう。まあ

Answer 1

、彼らは（あなたがやっている）position: absoluteを持っている必要がないだけでなく、thier *コンテナー/親* position: relativeを持っている必要があります。

あなたのケースでは、クラス.video-itemのDIVになるので、position: relativeを.video-itemに追加する必要があります。そして、topとleftの設定を.textに加えることによって、テキストの位置を調整する必要があります。

Answer 2

、あなただけの単なるテキストクラスにCSS

.text{ 
     position: relative; 
     bottom: 100px; 
     z-index: 100;} 

へ

Hereを変更する画像の上にテキストを配置したい場合は、画像の上にテキストブロックを配置する方法を説明します素晴らしい記事です。

hereは@xbonezの例です。 .video-itemコンテナ内部.textアイテムを配置する