Question

我正在尝试更好地将文本放在图像上，以便在居中的div中更好地显示。在低于1k pexels的分辨率。它确实需要更好地显示桌面分辨率。这是我的网页模板，正文中的内容居中。

如果您查看1k像素以下的页面，它无法正确显示我希望它显示在距离左侧10个像素的标题上。

显示它的HTML代码。

<div id="header">
  <div class="textoverimage">
    <p>New two day trip - Zoo & New Years Eve<br /> Sydney Harbour 2012. Book now to avoid disappointment.  </p>
  </div>
  </div>

我的CSS用于上述元素。

#header {
    height: 205px;
    width: 960px;
    margin: 0px;
    padding: 0px;
    border-top: medium none #009933;
    border-right: medium none #009933;
    border-bottom: medium none #009933;
    border-left: medium none #009933;
    background: url(../_images/header.jpg) no-repeat;
}

.textoverimage {
    z-index: 100;
    position: absolute;
    left: 350px;
    top: 100px;
    right: 30px;
    bottom: 0px;
    height: 50px;
    width: 300px;
    border: medium none #03F;
    color: #FFF;
}

TYVY Jared

Answer 1

您的#header需要position: relative;如果它是相对的，那么您可以根据需要在left: 10px和顶部设置.textoverimage。

Answer 2

如果要在左侧10px的图像上显示文字给位置：相对于父div和左：10px到.textoverimage类并从段落p中删除padding-left，这里是代码：

.textoverimage{
  z-index: 100;
 position: absolute;
 left: 10px;
 top: 100px;
 right: 30px;
 bottom: 0px;
 height: 50px;
 width: 300px;
 border: medium none #03F;
 color: #FFF;
}

#header {
 height: 205px;
 width: 960px;
 margin: 0px;
 padding: 0px;
 border-top: medium none #009933;
 border-right: medium none #009933;
 border-bottom: medium none #009933;
 border-left: medium none #009933;
 background: url(../_images/header.jpg) no-repeat;
 position: relative;
}

p {
 padding: 15px 0;
 margin: 1px;
 vertical-align: text-top;
}
![screenshot][1]


  [1]: http://i.stack.imgur.com/vGARy.jpg

我正在尝试使用z-index和绝对位置将文本放在图像上？

2 个答案: