我希望创建一个布局，左侧显示图片，右侧显示内容。当内容滚动时，图片应保持不变。
我使用的CSS如下：
我采纳了建议并将position:fixed属性添加到#main-image中，使用上面显示的HTML和CSS。 现在，我还想固定标题，使其不移动。基本上，只有我的内容部分应该滚动。 然而，如果我给标题添加一个position:fixed属性，那么我的#main-image和#content现在会放在我的标题顶部。 如果我给#main-image添加margin-top:150px（因为我的标题高度为150px），它可以正常工作并适当向下移动。 但是，如果我给#content添加margin-top:150px，我的标题就会向下移动150px，并仍然位于我的#content之上。 有人能解释一下这是为什么吗？ 提前感谢：）
我使用的CSS如下：
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
在这个网站上花了很多时间，我明白background-attachment:fixed会将图像定位于整个视口而不是应用它的元素。我的问题是如何创建这种布局？我不想将那张图片作为背景图片，因为如果窗口大小被调整，它可能会被隐藏。我希望当窗口大小小于900px（我的页面宽度）时出现滚动条，以便始终可以查看图像。虽然使用此代码可以实现，但我希望图像从我的元素开始。我该怎么做？谢谢 :)
我采纳了建议并将position:fixed属性添加到#main-image中，使用上面显示的HTML和CSS。 现在，我还想固定标题，使其不移动。基本上，只有我的内容部分应该滚动。 然而，如果我给标题添加一个position:fixed属性，那么我的#main-image和#content现在会放在我的标题顶部。 如果我给#main-image添加margin-top:150px（因为我的标题高度为150px），它可以正常工作并适当向下移动。 但是，如果我给#content添加margin-top:150px，我的标题就会向下移动150px，并仍然位于我的#content之上。 有人能解释一下这是为什么吗？ 提前感谢：）