<html>
<head>
<title>css的定位</title>
<meta charset="UTF-8"/>
<!--
css的定位学习：
position
相对定位：relative
作用：相对元素原有位置移动指定的距离（相对自己的原有位置，可以使用top,left,right,bottom来进行设置
其他元素位置是不改变的
绝对定位：absolute
作用：可以使元素参照界面或者相对父元素进行移动
固定定位：fixed
作用：将元素固定显示再页面的指定位置，不会随着滚动条的滚动改变位置
以上定位都可以使用top,left,right,bottom来进行移动
z-index:此属性是用来声明元素的显示级别的
-->
<style type="text/css">
#div01{
border: dashed 2px red;
width: 800px;
height: 200px;
margin-top: 50px;
/*position: relative;/*给div01添加相对丁文成为其子元素绝对定位的参照元素*/
}
#showdiv{
border: dashed 2px;
height: 50px;
width: 50px;
position: absolute;
top: 10px;/*相对于Body 如果让它相对于父级div01移动，则将div01加相对position:relative*/
}
#div02{
border: dashed 2px yellowgreen;
width: 800px;
height: 200px;
position: relative;
background-color: #8A2BE2;
margin-bottom: 10px;
left: 50px;
top: 100px;
z-index: 1;
}
#div03{
border: dashed 2px blueviolet;
width: 800px;
height: 200px;
background-color: brown;
position: relative;
z-index: 2;
}
#div04{
border: dashed 2px darkgoldenrod;
width: 40px;
height: 40px;
background-color: darkgoldenrod;
right: 100px;
top: 100px;
position: fixed;
}
</style>
</head>
<body>
<div id="div01">
<div id="showdiv">
</div>
</div>
<div id="div02">
</div>
<div id="div03">
</div>
</div>
<div id="div04">
</div>
</body>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
</html>效果展示：
