<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#result1{
width:20px;
height:20px;
left:10px;
top:10px;
background-color:red;
position:relative;
}
#result2{
width:20px;
height:20px;
background-color:black;
}
</style>
</head>
<body>
<script type="text/javascript">
</script>
<div id = "parent">
<div id="result1"></div>
<div id="result2"></div>
</div>
</body>
</html>
result1设置了reletive的话,他将会根据设置的top、left、
adding等进行偏移,而result2该在哪里就在那里。
不设置reletive的话left、top位置不动。
当result1设置了absolute的时候有两个情况
如果parent也设定了absolute或者relative时,它就是以parent进行定位,从parent的padding左上角开始定位,然后如果parent也设定了absolute或者relative时,它就是以parent进行定位,从parent的padding左上角开始定位,然后result2会在result1的位置上,result1其实就变得“浮”起来了。
如果他的父级没有设定absolute或者relative时,他就会以body进行定位
fix是以body为对象,按照浏览器窗口来进行定位的。
static 这个是默认值,正常排列。