固定div背景

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之上.有人可以解释为什么会这样吗？提前致谢 :)

Answer 1

看看这个链接：

http://www.barelyfitz.com/screencast/html-training/css/positioning/

您可以学习如何用它来定位 Div。

这将解决您的问题： #main-image {position:fixed;}

编辑：我不确定是什么导致了您的问题，但解决方案如下： #content{ position:relative; top:150px; }

我的猜测：我认为发生这种情况是因为当使用position:fixed时，这两个div是相对于浏览器窗口定位的，而另一个是相对于文档本身定位的。

在此链接中，您将看到有关定位的更多信息，并且可以测试其中一些与位置属性相关的功能：

http://www.w3schools.com/cssref/pr_class_position.asp

关于一个 div 位于另一个 div 之上的事实，您应该搜索“z-index”属性。Firefox 有 3D 模式，因此您可以更清楚地看到这一点：

http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/