我希望创建一个布局,左侧显示图片,右侧显示内容。当内容滚动时,图片应保持不变。
我使用的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之上。 有人能解释一下这是为什么吗? 提前感谢:)