<!-- <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table注意事项</title><style>table{border-collapse: collapse; /*合并表格线*/border: 1px solid #ccc;width: 800px;}th,td,tr{width: 50px;height: 40px;text-align: center;} </style>
</head>
<body><table border="1"><tr><th>时间日期</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><th rowspan="2">上午</th> 跨行合并<td>语文</td><td>地理</td><td>代数</td><td></td><td></td></tr><tr><th>上午</th><td>语文</td><td>地理</td><td>代数</td><td></td><td></td></tr><tr><td colspan="6">午自修</td>跨列合并
<td></td><td></td><td></td><td></td><td></td></tr><tr><th rowspan="2">下午</th>跨行合并<td></td><td></td><td></td><td></td><td></td></tr><tr><th>下午</th><td></td><td></td><td></td><td></td><td></td></tr></table>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>太极图</title><style type="text/css" media="screen">#a{width: 300px;height: 600px;border: 1px solid black;background: white;border-right: 300px solid black;border-radius: 50%;}#a::before{content: '';display: block;/* 300/3 */width: 100px;height: 100px;background: white;border: 100px solid black;border-radius: 50%;margin-left: 150px;}#a::after{content: '';display: block;width: 100px;height: 100px;background: black;border: 100px solid white;border-radius: 50%;margin-left: 150px;}</style>
</head>
<body><div id='a'></div>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css" media="screen">#comm{width: 400px;height: 400px;background: green;}#a1{width: 200px;height: 100px;background: red;/* 相对定位 相对于自己原来的位置进行定位*//* position: relative;top: 20px;left: 50px; */
/* bottom: ;right: ; *//* 绝对定位 针对父元素的位置来进行定位的*/position: absolute;top: 20px;left: 40px;}#a2{width: 200px;height: 100px;background: yellow;position: absolute;top: 40px;left: 80px;/* 提升层次 覆盖 */z-index: 9999; }#a3{width: 200px;height: 100px;background: blue;position: absolute;top: 60px;left: 120px;}</style>
</head>
<body><div id='comm'> </div><div id="a1"></div><div id="a2"></div><div id="a3"></div>
</body>
</html>绝对定位父元素必须是定位过得！