HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="stylesheet" type="text/css" href="Text06.css">
</head>
<body>
<p>EDG内战幻神，东方不败</p>
<div id="ps1"></div>
<div id="ps2"></div>
<script>
for(var i=0;i<10;i++){
document.write(i+"<br/>")
}
</script>
</body>
</html>CSS代码
P{
outline-style: dotted;
outline-color: deepskyblue;
outline-width: 4px;
}
/*style规定轮廓线的样式，color规定轮廓线的颜色.width规定轮廓线的宽度*/
#ps1{
width:150px;
height: 150px;
background-color: deepskyblue;
position: relative;
left: 30px;
top: 30px;
z-index: 2;
}
/*relative相对的布局，按照HTML默认顺序，同时占用一个空间，是一层
absolute是绝对布局，相当于覆盖到第一层上面，两层空间
fixed是固定效果，类似刷空间时的背景
static是静态的，可以位置偏移不会对设置位置照成影响，就是相对路径的极端*/
#ps2{
width:150px;
height: 150px;
background-color: firebrick;
position: relative;
left: 10px;
top: 10px;
z-index: 1;
/*通过z-index赋值，值越大，如果发生重合，其值大的显示在上面，小的在下面*/
}效果：
