div_漂浮/懸浮


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)元素定位的參照物是其包含塊,既相對於其包含塊進行定位,不一定是其父元素。
      建議去詳細通讀一下定位體系和包含塊。

    ”

 

 

C

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM