艺术框架内的文字

Question

我在这里感到沮丧，试图让我的 div 正确排列！我正在尝试将我的文本放在艺术框架的图像中。 html是：

<div id="frame">
<div id="songtext">
<p>lorem ipsum dolor...</p>
</div>
</div>

CSS 是：

#frame {
background:url(images/gold-frame-trans-bg.png) no-repeat; 
margin-left:auto;
margin-right:auto;
margin-top:0px;
width:650px;
height:750px;
}

#songtext {
width:336px;
height:410px;
margin-left:auto;
margin-right:auto;
margin-top:140px; 
overflow:auto;
}

当我这样做时，图像的顶部与文本的顶部对齐，在屏幕顶部下方 140 像素处。但如果我改变 #songtext {margin-top:140px;} 至 #songtext {padding-top:140px;) 文本显示在正确的位置，但滚动条仍然从页面顶部开始，打断了图像。当我向上滚动时，文本会滚动到图像上，而不是看起来隐藏在它下面。 （这有意义吗？） 如果您希望直观地看到它，请查看以下页面： http://studentaccess.emporia.edu/~asmith40/AVAwebsite/seemsimpossible.html

Answer 1

你可以这样做：

#songtext {
 height: 410px;
 margin-left: 160px(or similar);
 margin-right: auto;
 margin-top: 140px;
 overflow: auto;
 position: absolute;
 width: 336px;

}