1、
測試代碼為:
<html> <body> <div id="divBack01" style="background-color:silver; height:300px; width:800px"> </div> <div id="divBack02" style="background-color:gray; height:300px; width:800px"> </div> <div id="divPiao" style="background-color:red; width:50px; height:30px; position: fixed; left:800px; top:500px;"> </div> </body> </html>
ZC:
(1)、
divBack01 和 divBack02 是在底層的兩個div,divPiao 是漂浮着的 div。
測試下來,設置 divPiao.style.left 和 divPiao.style.top 就可以讓 divPiao 移動。到這里,效果還是比較理想的。
(2)、
且 就算divPiao 設置也沒有體現出“CSS==>display:block”,也沒有體現出block的現象("元素前后會帶有換行符")。
感覺 divPiao 和 divBack01/divBack02 是在不同的層次上的,為什么會這樣?是∵ position不同的緣故?
PS:CSS 的 "z-index:2147483647;" (ZC: 貌似 此值越大==>離用戶越近;此值越小==>離用戶越遠)
ZC:測試了一下,兩個"position: fixed;"的div居然可以疊在一起放置...
ZC: "position: fixed;" ==> 可定位於相對於包含它的元素的指定坐標。
ZC:貌似記得這個父元素的position屬性 也是有要求的,但是記不得什么要求了...
參考:http://www.zhihu.com/question/19926700
“
首先,我想告訴你的是,如果父級元素是絕對定位(absolute)或者沒有設置,里面的絕對定位(absolute)自動以body定位。這句話是錯的。
正確的是:只要父級元素設了position並且不是static(默認既是static),那么設定了absolute的子元素即以此為包含塊(最近的)。
絕對定位(Absolute positioning)元素定位的參照物是其包含塊,既相對於其包含塊進行定位,不一定是其父元素。
建議去詳細通讀一下定位體系和包含塊。
正確的是:只要父級元素設了position並且不是static(默認既是static),那么設定了absolute的子元素即以此為包含塊(最近的)。
絕對定位(Absolute positioning)元素定位的參照物是其包含塊,既相對於其包含塊進行定位,不一定是其父元素。
建議去詳細通讀一下定位體系和包含塊。
”
C