2016-12-27 11 views
0

id="text-field"のテキストの一部がid="image-field"に重なるようにデザインしようとしています。どうやってこれを行うのか分かりません。ありがとうございます。要素を他のdivと重複させる方法

<!DOCTYPE html> 
<html> 
    <body> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-sm-6" id="text-field"> Some text </div> 
       <div class="col-sm-6" id="link-field"> Some link </div> 
      </div> 
      <div class="row"> 
       <div class="col-sm-12" id="image-field">Background Image </div> 
      </div> 
     </div> 
    </body> 
</html> 
+1

'位置から出て行くからposition:absolute要素を維持するために使用されます。絶対、あなたは'の位置を知ることができます ' –

+1

:absolute'。 –

+0

最初の位置について学ぶ:絶対およびz-インデックス:値;あなたが何か問題に直面したら、尋ねてください:) – Ishu

答えて

2

を取得します例

.box { 
 
    position: relative; 
 
} 
 
.box__image {} .box__text { 
 
    position: absolute; 
 
    bottom: 0; 
 
}
<div class="box"> 
 
    <div class="box__image"> 
 
    <img src="http://placehold.it/350x150"> 
 
    </div> 
 
    <div class="box__text"> 
 
    Testing text 
 
    </div> 
 
</div>

ほんの少し説明position:relativeは、それを含むdivの

0

要素の位置指定が可能です。 css.Youの

#image-field{ 
    position: absolute; 
    top: 0px; 
} 

研究postionsのプロパティは、ここでhere

があり、私はそれはCSSで行うにはかなり一般的なことだ小さな再利用可能な例を作っもっとアイデアに postion properties

関連する問題