我想创建一个布局，在左侧显示图像，在右侧显示内容。当内容滚动时图像应保持不变。
我正在使用的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（我的页面宽度），我希望出现滚动条，以便可以随时查看图像。
这段代码会发生这种情况，但是我希望图像从我的元素开始。
我该怎么做呢？
提前致谢 ：）
Edited:
我采纳了建议，并向#main-image 添加了一个position:fixed 属性。使用 HTML 和 CSS，如上所示。
现在，我还想修复标题，使其不会移动。基本上，只有我的内容部分应该滚动。
但是，如果我添加一个位置：固定到标题，我的#main-image和#content现在位于我的标题顶部。
如果我向 #main-image 添加 margin-top:150px （因为我的标题高度是 150px），它会正常工作并适当向下移动。
但是，如果我向 #content 添加 margin-top:150px，我的标题会向下移动 150px，并且仍然位于 #content 的顶部。
有人可以解释为什么会发生这种情况吗？
提前致谢 ：）
看看这个链接：
http://www.barelyfitz.com/screencast/html-training/css/positioning/ 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 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/ http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
