使用位置：相對；在圖片區域內包含文本

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，desk將收到所需的背景圖像，固定的寬度和高度，並且由於desk沒有容器，因此margin 0 auto 。

2. .header類不需要是絕對的，我們可以在已經相對放置的辦公桌中使用它。 我們給它一點填充，使其適合桌面圖像。

3. .answer類應用於textarea元素，我們將其width 100%; 因為我們在已經有預定義寬度的.desk使用它，所以.answer將配備書桌中所有可能的寬度。

一個很好的提示是，在CSS中始終認為簡單，應了解position: absolute的用法position: absolute ，這在確實有必要時。 通過如果你不熟悉的方式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;
}

小提琴： https : //jsfiddle.net/y3h1ogms/5/

Answer 2

當設置position: relative對於元素時，它將相對於最近定位的祖先進行定位，其中根據MDN的 “定位”表示：

定位元素是其計算的位置屬性為相對，絕對，固定或粘滯的元素。

在您的示例中，標頭不是圖像的后代，因此無法將其相對於圖像定位。 您可能要做的是將<img>轉換為<div>將<div>的background-image設置為圖像URL。 您還需要顯式設置div的寬度和高度。