組合使用的時(shí)候，父級(jí)元素相對(duì)定位設(shè)置具體定位方向的時(shí)候，為什么會(huì)讓定位元素?zé)o法正常設(shè)置定位方向？
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style>
div{
border:solid 2px red;
? ? ? ? width:400px;
? ? ? ? height:200px;
? ??
position:relative;
top:20px;
? ? ? ? left:10px;/*當(dāng)這里設(shè)置right的時(shí)候，下面注釋的地方就不可以再設(shè)置right，只可以設(shè)置LEFT，反之，只可以設(shè)置right，為什么？？？*/
}
div.div1{
position:absolute;
? ? ? ? ?width:30%;
? ? ? ? ?height:30%;
border-color:blue;
top:10px;left:10px;
}
div#div2{
position:absolute;
? ? ? ? right:10px; ? /*為什么這里 可以設(shè)置左，當(dāng)設(shè)置右的時(shí)候就沒有效果,比如此時(shí)單單改動(dòng)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>
說的不是很清楚，左右的是這樣，從而引申出上下方向的問題。
這到底是為什么？？？
2016-07-15
我找到答案了，布局是從左到右，從上到下解析的，css是屬性是層疊繼承的，#div2中雖然能改right，但是div下面有l(wèi)eft,width已經(jīng)定位了基本形狀，所以在改right就不起作用了。div2如果改成right:30px;，它繼承了div樣式的left:50;但是又定寬，會(huì)優(yōu)先走left，right被忽略
div2如果改成right:30px;并且width:auto，那么他就會(huì)左50，右30，自動(dòng)布局。
所以也就解釋了為什么上面設(shè)置right ?下面不管左右都有效。而上面left的時(shí)候下面右就無效
2016-07-02
我在慕課網(wǎng)的代碼區(qū)試了 確實(shí)是可以的，div設(shè)置為right ?#div2的right改變的時(shí)候綠框確實(shí)可以相對(duì)父級(jí)div移動(dòng)的
2016-06-28
我是可以的，不知道你為什么不行。換個(gè)瀏覽器試試？
2016-06-27
我可以啊
2016-06-25
你要看一下的div 是什么 頂級(jí)的div ? 你把頂級(jí)的div ?給他一個(gè)id 或者class 命名就行了， 以后不能犯那么低級(jí)錯(cuò)誤