位置を使用して画像領域内のテキストを含む：相対;

Question

私は画面サイズに関係なく、画面上の同じ場所にオブジェクト（テキストと呼ぶ）を保持するために、Position：relativeを使用する方法を理解しようとしています。

私はPosition：relativeを使用し、 "left"を30％に設定すると...画面の30％です。私は画像の上にテキストを置き、画像内にテキストが30％残るように設定する方法を見つけようとしています。私は画面のサイズに関係なく動作するためにこれが必要です。これまで私はできなかった。

このような状況で、相対的なポジションと絶対的なポジションがどのように機能するのか誰かが私に説明できますか？または、これがどのように処理されるのが最善でしょうか？

ありがとうございます！

はここに私のJsFiddleだし、ここでのスニペットに

.center { 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 
body { 
 
    background-color: #27ae60; 
 
} 
 
.image { 
 
    position: relative; 
 
    width: 100%; 
 
    /* for IE 6 */ 
 
} 
 
.element { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 30%; 
 
    width: 100%; 
 
    font-size: 45px; 
 
    font-family: 'Just Me Again Down Here', cursive; 
 
} 
 
.input { 
 
    /*color: blue;*/ 
 
    outline: none; 
 
    border: none; 
 
    background-color: transparent; 
 
    position: absolute; 
 
    top: 220px; 
 
    left: 18%; 
 
    width: 480px; 
 
    height: 475px; 
 
    overflow: hidden; 
 
    font-size: 30px; 
 
    font-family: 'Just Me Again Down Here', cursive; 
 
}

<img id='image' class='center' src='https://s13.postimg.org/li2l28a0n/White_Board.gif'> 
 

 

 
<h1 class='element'>This is a header </h1> 
 
<textarea id='text1' class='input' placeholder="Write your answer here."></textarea>

Answer 1

1. まずセットアップ.deskクラスを持つdiv要素だ、デスクが必要な背景画像、一定の幅を受け取ることになりますし、高さはmargin 0 autoになりますので、机にはコンテナがありません。

2. .headerクラスは絶対的なものである必要はなく、すでに相対的に配置されている机の中で使用します。我々はそれが机のイメージに収まるように少しパディングを与える。

3. .answerクラスは、我々はそれを与えるtextarea要素に適用され、我々はすでにつまり、幅を事前に定義されてい.desk以内にそれを使用するのでwidth 100%;が.answerデスク内で可能な幅のすべてを装備します。

大きなヒントは、常にそれが本当に必要なとき、position: absoluteの使用方法を理解し、CSSでシンプルだと思います。ところで、あなたがremのサイジングに精通していない場合は、こちらをご覧ください：https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

幸運！

あなたは見ている。..はるかに簡単なコードで所望の効果を得ることができます。

body { 
    background-color: #27ae60; 
} 

.desk { 
    position: relative; 
    background-image: url(https://s13.postimg.org/li2l28a0n/White_Board.gif); 
    width:560px; 
    height:839px; 
    margin: 0 auto; 
} 

.header { 
    padding: .5rem 0 0 2rem; 
    font-size: 2.5rem; 
    font-family: 'Just Me Again Down Here', cursive; 
} 

.answer { 
    width: 100%; 
    margin-left: 2rem; 
    outline: none; 
    border: none; 
    background-color: transparent; 
    overflow: hidden; 
    resize: none; 
    font-size: 2rem; 
    font-family: 'Just Me Again Down Here', cursive; 
} 

フィドル：要素にposition: relativeを設定するとhttps://jsfiddle.net/y3h1ogms/5/

Answer 2

が、それは最寄りに対して配置されます位置付けされた祖先は、MDNによる「位置付け」は、以下のことを意味する：

配置要素は、計算された位置プロパティi相対的、絶対的、固定的または粘着性のいずれかである。

この例では、ヘッダーはイメージの子孫ではないため、イメージを基準にして配置する方法はありません。代わりに、<img>を<div>に変換し、divのbackground-imageを画像URLに設定します。また、divの幅と高さを明示的に設定する必要があります。