采用CSS定位屬性實(shí)現(xiàn)Html中DIV層疊與懸浮

字號(hào):


    一般來說,DIV沒有懸浮一說,更準(zhǔn)確的應(yīng)為層疊或者固定。最簡(jiǎn)單的方法是采用CSS定位屬性。
    1、DIV層疊,即一個(gè)層疊加在另外一個(gè)層上
    利用相對(duì)定位和絕對(duì)定位來實(shí)現(xiàn):
    在父對(duì)象上設(shè)置:position:relative; 在子對(duì)象上設(shè)置:position:absolute; top: 10px; left: 10px;
    這樣如果父對(duì)象里面有其他元素的話。上面設(shè)置的子對(duì)象就可以"懸浮"在父對(duì)象上面了。
    2、元素固定在窗口的某個(gè)位置
    使用固定定位:
    在需要懸浮的元素上設(shè)置:position:fixed; top: 10px; left: 10px;
    上一個(gè)固定定位的源碼:
    代碼如下:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS固定定位</title>
    <style type="text/css">
    body {
    margin:0px auto;
    }
    #fixedLayer {
    position:fixed;
    left: 40px;
    top: 10px;
    width:100px;
    line-height:30px;
    background: #FC6;
    border:1px solid #F90;
    }
    </style>
    </head>
    <body>
    <div id="fixedLayer">固定不動(dòng)</div>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    </body>
    </html>
    3、以body為父對(duì)象
    如果不存在上述的父對(duì)象,則依據(jù) body 對(duì)象。而其層疊通過 z-index 屬性定義,fixed :未支持。對(duì)象定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范,relative :對(duì)象不可層疊,但將依據(jù) left, right , top , bottom 等屬性在正常文檔流中偏移位置。
    說明:檢索對(duì)象的定位方式。設(shè)置此屬性值為 absolute 會(huì)將對(duì)象拖離出正常的文檔流絕對(duì)定位而不考慮它周圍內(nèi)容的布局。假如其他具有不同 z-index 屬性的對(duì)象已經(jīng)占據(jù)了給定的位置,他們之間不會(huì)相互影響,而會(huì)在同一位置層疊。此時(shí)對(duì)象不具有外補(bǔ)丁 margin ,但仍有內(nèi)補(bǔ)丁 padding 和邊框 border 。
    要激活對(duì)象的絕對(duì)(absolute)定位,必須指定 left, right , top , bottom 屬性中的至少一個(gè),并且設(shè)置此屬性值為 absolute 。否則上述屬性會(huì)使用他們的默認(rèn)值 auto ,這將導(dǎo)致對(duì)象遵從正常的HTML布局規(guī)則,在前一個(gè)對(duì)象之后立即被呈遞。設(shè)置此屬性值為 relative 會(huì)保持對(duì)象在正常的HTML流中,但是它的位置可以根據(jù)它的前一個(gè)對(duì)象進(jìn)行偏移。在相對(duì)(relative)定位對(duì)象之后的文本或?qū)ο笳加兴麄冏约旱目臻g而不會(huì)覆蓋被定位對(duì)象的自然空間。與此不同的,在絕對(duì)(absolute)定位對(duì)象之后的文本或?qū)ο笤诒欢ㄎ粚?duì)象被拖離正常文檔流之前會(huì)占有它的自然空間。放置絕對(duì)(absolute)定位對(duì)象在可視區(qū)域之外會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)。而放置相對(duì)(relative)定位對(duì)象在可視區(qū)域之外,滾動(dòng)條不會(huì)出現(xiàn)。內(nèi)容的尺寸會(huì)根據(jù)布局確定對(duì)象的尺寸。
    例如,設(shè)置一個(gè) div 對(duì)象的 height 和 position 屬性,則 div 對(duì)象的內(nèi)容將決定它的寬度( width )。此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。對(duì)應(yīng)的腳本特性為 position 。