Javascript 使用位置：相对包含图片区域内的文本；

我试图弄清楚如何使用Position:relative，以便不管屏幕大小如何，将对象（我们称之为文本）保持在屏幕上的相同位置

当我使用Position:relative，并将“left”设置为30%时，例如。。。占屏幕的30%。我正在尝试找出如何将文本放在图像的顶部，并将文本设置为图像中剩余的30%。我需要这个工作，无论屏幕大小。到目前为止我还不能

有人能给我解释一下相对位置和绝对位置在这种情况下是如何工作的吗？或者如何最好地处理这个问题

谢谢

这是我的，这是片段

.center{
显示：表格；
保证金：0自动；
}
身体{
背景色：#27ae60；
}
.形象{
位置：相对位置；
宽度：100%；
/*对于IE 6*/
}
.元素{
位置：绝对位置；
顶部：100px；
左：30%；
宽度：100%；
字体大小：45px；
字体家族：“这里又是我”，草书；
}
.输入{
/*颜色：蓝色*/
大纲：无；
边界：无；
背景色：透明；
位置：绝对位置；
顶部：220px；
左：18%；
宽度：480px；
身高：475px；
溢出：隐藏；
字体大小：30px；
字体家族：“这里又是我”，草书；
}

这是一个标题

首先，我们使用

.desk

类设置一个div，desk将接收所需的背景图像，具有固定的宽度和高度，并且由于desk没有容器，因此它将

margin 0 auto

.header

类不需要是绝对的，我们在已经相对定位的桌面中使用它。我们给它加了一点填充物，这样它就可以放在桌子的图像中

.answer

类应用于

textarea

元素，我们给它一个

宽度100%

因为我们在

.desk

中使用它，而

已经有了预定义的宽度，这意味着
.answer
将配备桌内所有可能的宽度

一个很好的技巧是在CSS中始终保持简单思维，在真正需要时理解

position:absolute

的用法。顺便说一句，如果您不熟悉

rem

size，我建议您看看这里：

祝你好运

您可以在一个简单得多的代码中获得所需的效果。。看看：

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;
}

---

Fiddle:

当在元素上设置

位置：相对时，它将相对于最近的定位祖先进行定位，其中“定位”根据方式：

定位元素是其计算位置属性为相对、绝对、固定或粘滞的元素

在您的示例中，标题不是图像的后代，因此无法相对于图像定位标题。您可以改为将
转换为
将div的
背景图像设置为图像URL。您还需要显式设置div的宽度和高度。
这很好。你能稍微修改一下你的答案来解释为什么这个效果更好吗？@AndrewLeonardi我试图解释最好的答案，见我的编辑：）精彩的答案。谢谢！！：）