Question

我想创建一个布局，我想在左边显示图像，在右边显示内容。当内容滚动时，图像应保持不变。

我正在使用的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>

在这个网站上有很多时间，我已经理解了背景附件：固定图像在整个视口中的位置，而不是它应用的元素。

我的问题是如何创建这种布局？

我不想将该图像作为背景图像，就好像窗口调整大小一样，它可能会被隐藏。如果窗口大小小于900px（我的页面宽度），我想要滚动条出现，以便可以随时查看图像。

这个代码会发生这种情况，但我希望图像从我的元素开始。

我该怎么做？

提前致谢：）

编辑：

我接受了建议并添加了一个位置：固定属性为#main-image。使用如上所示的HTML和CSS。现在，我还想修复标题，使其不移动。基本上，只有我的内容部分应该滚动。但是，如果我添加一个位置：固定到标题，我的#main-image和#content现在位于我的标题之上。如果我向#main-image添加一个margin-top：150px（因为我的标题高度是150px），它可以正常工作并适当地向下移动。但是如果我在#content中添加一个margin-top：150px，我的标题会向下移动150px并且仍然位于我的#content之上。有人可以解释为什么会这样吗？在此先感谢：）