我正在制作一个个人博客，人们可以下载和编辑，但是内容区域始终位于同一位置（在工具栏下），即使我将左侧设置为195px。抱歉，如果这有点混乱并且难以阅读，但这是我的代码：
<html>
<head>
<title>[Your Name]'s Blog</title>
<style type="text/css">
div.selector
{
position: fixed;
top: 0;
left: 0;
width: 189px;
height: 100%;
background: #0000FF;
}
</style>
<style type="text/css">
div.scroll
{
top:10;
left:195;
border:double;
border-color:#000000;
background-color:#FFFFFF;
width:500px;
height:900px;
overflow-y:scroll;
overflow-x:hidden;
}
</style>
<style type="text/css">
div.flow
{
display:inline;
}
</style>
<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>
</head>
<body>
<div class="selector">
<div>
<div>
<button onclick ="javascript:ShowHide('Me')" href="javascript:;" >Show/Hide Image</button>
<div class="mid" id="Me" style="DISPLAY: none" >
<img src="[Your Image Link]" alt="[Your Name]"/><br/>
</div>
</div>
<div>
<form method="get" action="http://www.youtube.com/results?search_query=" target="new">
<input type="text" name="q" size="25"
maxlength="255" value="Search youtube" onfocus="this.value==this.defaultValue?this.value='':null"/>
<input type="submit" value="Search Youtube" />
</form>
</div>
<form method="get" action="http://www.google.com/search">
<div>
<input type="text" name="q" size="25"
maxlength="255" value="Google Search" onfocus="this.value==this.defaultValue?this.value='':null"/>
<input type="submit" value="Google Search" />
</div>
</form>
</div>
</div>
<div class="scroll">
<h1><center>[Your Name]'s Blog</center></h1>
<p>Note: Paragraphs are in between <p> and </p>. Subheadings are in between <h2> and </h2>.</p>
</div>
</body>
</html>
最佳答案
顶部和左侧的声明不会做任何事情，因为它们仅在项目定位到“静态”以外的其他位置（“相对”或“绝对”）时起作用。
您将要添加
margin-left: 195px;
要么
position: relative;
另外，您不需要将每个声明包装在自己的单独的
<style>标记中。关于html - 为什么即使在CSS中设置内容区域，我的内容区域也不会移动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9572271/