绝对图像上的 CSS 绝对文本在调整浏览器大小时移动，为什么？

Question

我已经构建了一个 3 列布局。我想在中间内容的图像上放置一些文本(标题)。但是每次我调整浏览器窗口的大小时，文本都会移动。有什么建议么？我想，当把图像放在一个绝对容器中(它本身在一个相对容器中)时，我可以在元素不移动的情况下放置任何绝对层。有什么建议吗？

这是一个 jsfiddle:http://jsfiddle.net/Dkjsc/3/

更新:如果我们从 middlecontent 中删除 height 属性，一切正常。但这是可行的方法吗？

HTML:

<div id="content" class="content">

  <!--LEFT-->
   <div id="leftcontent" class="leftcontent">&nbsp;</div>

  <!--MIDDLE-->
  <div id="middlecontent" class="middlecontent">
     <div id="heading" class="heading">Text</div>
     <img src="images/Windows/Window_10.png" alt="" style="width:100%;">
  </div>

  <!--RIGHT-->
  <div id="rightcontent" class="rightcontent">&nbsp;</div>
</div>

CSS:

html, body {
 margin:0px;
 padding:0px;
 width:100%;
 height:100%;
}
.content {
 position:relative;
 width:100%;
 height:100%;
}

.leftcontent{
 position:absolute;
 width:20%;
 height:100%;
 left:0%;
}

.middlecontent {
 position:absolute;
 text-align:center;
 width:60%;
 height:100%;
 left:20%;
 top:10%;
 }

.rightcontent {
 position:absolute;
 width:20%;
 height:100%;
 right:0%;
}

.heading{
 position:absolute;
 text-align:center;
 width:100%;
 top:12%;
}

Answer 1

您需要将相对位置放在您想要的固定大小的元素上，否则它相对于不断改变大小的窗口