组合使用的时候，父级元素相对定位设置具体定位方向的时候，为什么会让定位元素无法正常设置定位方向？
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
border:solid 2px red;
width:400px;
height:200px;
position:relative;
top:20px;
left:10px;/*当这里设置right的时候，下面注释的地方就不可以再设置right，只可以设置LEFT，反之，只可以设置right，为什么？？？*/
}
div.div1{
position:absolute;
width:30%;
height:30%;
border-color:blue;
top:10px;left:10px;
}
div#div2{
position:absolute;
right:10px; /*为什么这里 可以设置左，当设置右的时候就没有效果,比如此时单单改动RIGHT的值的情况下，试试看？*/
top:20px;
height:30%;
width:35%;
border-color:green;
}
</style>
</head>
<body>
<p>hahahhahahaha</p>
<div>
<div class="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
说的不是很清楚，左右的是这样，从而引申出上下方向的问题。
这到底是为什么？？？
