我尝试将＃box1定位在＃table1下，我尝试将其移动，但它没有移动。我究竟做错了什么。
我是CSS的新手。
编辑：我把我的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment 1</title>
<meta charset="utf-8">
<style>
html{
background: #afc2df;
}
#box1{
position fixed;
border: 120px;
border-style: groove;
border-radius:35px;
width: 505px;
length: 75px;
margin-left: 85px;
z-index: 5;
}
this is the table I want to move
#table1{
position fixed;
background: #00FFFF;
margin-left: 118px;
top: 160px;
z-index: 6;
}
</style>
</head>
<body>
<b></b><h1><b><i><font face="impact" color="red">Name</font> </i></b></h1>
<b></b><h2><b><i><font face="impact" color="red">Number</font> </i></b></h2>
<table border="3" id="table1">
<tbody><tr>
<th colspan="2">WEB PAGE ELEMENTS</th>
</tr>
<tr>
<th>Html</th>
<td><font face="Candara" color="black">Marks beginning and ending of a web page (closing tags needed)</font></td>
</tr>
<tr>
<th>Head</th>
<td><font face="Candara" color="black">Used to enclose elements not apart of the main page (closing tags needed)</font></td>
</tr>
<tr>
<th>Title</th>
<td><font face="Candara" color="black">Included in the <head> section, appears in the title bar of the browser (closing tags needed)</font></td>
</tr>
<tr>
<th>Body</th>
<td><font face="Candara" color="black">Includes content that is visible in the browser (closing tag needed)</font></td>
</tr>
<tr>
<th>Meta</th>
<td><font face="Candara" color="black">Allows passage of information about the page to user agents(self-closing tag)</font></td>
</tr>
</tbody></table>
<div id="box1"></div>
</div>
</body>
</html>
这是CSS和我的html。
我真的很想擅长于此，感谢您的帮助。
最佳答案
我进行了一些修改以清理您的代码。预警：您需要对此做些愚蠢的研究，不要直接将作业分配给您的老师，除非他们对视觉输出一无所知（并且如果他们立即离开那所大学并成为自学成才！）。不要过分依赖CSS 2级position属性，如果他们还没有教您有关CSS 1级float的知识，那么您将永久性地无法熟练地编码CSS。
如果您想学习如何正确使用CSS，请从基础知识开始...
http://www.jabcreations.com/web/css/nested-divisible-elements
就是说，这就是您想要的，页面内容滚动了，而巨大的带边框的分隔元素却没有。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Assignment 1</title>
<style type="text/css">
/*<![CDATA[*/
body
{
background: #afc2df;
overflow: hidden;
}
#body
{
bottom: 0px;
left: 0px;
position: absolute;
overflow: auto;
right: 0px;
top: 0px;
}
#body > *
{
margin: 10px;
}
#box1
{
border: 250px;
border-style: groove;
border-radius:35px;
margin-left: 85px;
position fixed;
top: 20px;
width: 70%;
z-index: 5;
}
/*this is the table I want to move */
table
{
height: 900px;
background: #0ff;
margin-left: 118px;
}
.candara
{
font-color: #000;
font-family: Candara;
}
/*]]>*/
</style>
</head>
<body>
<div id="body">
<h1 style="font-weight: bold; font-family: impact;">Name</h1>
<h2 style="font-weight: bold; font-family: impact;">Number</h2>
<table summary="This summary text is read by screen readers, always provide a summary attribute on table elements.">
<thead><tr><th colspan="2">WEB PAGE ELEMENTS</th></tr></thead>
<tfoot><tr><th colspan="2">WEB PAGE ELEMENTS</th></tr></tfoot>
<tbody>
<tr><th>Html</th><td class="candara">Marks beginning and ending of a web page (closing tags needed)</td></tr>
<tr><th>Head</th><td class="candara">Used to enclose elements not apart of the main page (closing tags needed)</td></tr>
<tr><th>Title</th><td class="candara">Included in the <head> section, appears in the title bar of the browser (closing tags needed)</td></tr>
<tr><th>Body</th><td class="candara">Includes content that is visible in the browser (closing tag needed)</td></tr>
<tr><th>Meta</th><td class="candara">Allows passage of information about the page to user agents(self-closing tag)</td></tr>
</tbody>
</table>
</div>
<div id="box1"></div>
</body>
</html>
关于css - 在背景CSS上移动表格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18992765/