固定 div 背景答案

【问题标题】：Fixed div background固定 div 背景
【发布时间】：2012-10-15 15:26:45
【问题描述】：

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

我正在使用的 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 将图像定位在整个视口中，而不是应用于它的元素。

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

我不想将该图像作为背景图像，因为如果调整了窗口大小，它可能会被隐藏。如果窗口大小小于 900 像素（我的页面宽度），我希望显示滚动条，以便随时查看图像。

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

我该怎么做？？

在此先感谢 :)

已编辑：

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

【问题讨论】：