真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

CSS中position屬性怎么用

這篇文章主要為大家展示了“CSS中position屬性怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS中position屬性怎么用”這篇文章吧。

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)樊城,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575

目前幾乎所有主流的瀏覽器都支持position屬性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE瀏覽器，IE9、IE10還沒測(cè)試過(guò)），以下是w3school對(duì)position五個(gè)值的解釋：

CSS中position屬性怎么用

其中absolute和relative是最常用的，fixed用得也比較多（其中IE6并不支持fixed）。

1、absolute（絕對(duì)定位）

absolute是生成覺對(duì)定位的元素，脫離了文本流（即在文檔中已經(jīng)不占據(jù)位置），參照瀏覽器的左上角通過(guò)top,right,bottom,left（簡(jiǎn)稱TRBL） 定位。可以選取具有定位的父級(jí)對(duì)象（下文將說(shuō)到relative與absolute的結(jié)合使用）或者body坐標(biāo)原點(diǎn)進(jìn)行定位，也可以通過(guò)z-index進(jìn)行層次分級(jí)。absolute在沒有設(shè)定TRBL值時(shí)是根據(jù)父級(jí)對(duì)象的坐標(biāo)作為始點(diǎn)的，當(dāng)設(shè)定TRBL值后則根據(jù)瀏覽器的左上角作為原始點(diǎn)。具體案例如下：





position:absolute定位

    html,body,div{
                    margin:0;   
                    padding:0;  
                    list-style:none;
    }
    .center{
                margin:30px;
                border:#999999 solid 10px;
                width:400px;
                height:300px;
    }
    .div1{
            width:200px;
            height:200px;
            background:#0099FF;
            /*設(shè)定TRBL*/
            position:absolute;
            left:0px;
            top:0px;
    }
    .div2{
            width:400px;
            height:300px;
            font-size:30px;
            font-weight:bold;
            color:#fff;
            background:#FF0000;
    }



    
        
        position:absolute定位測(cè)試
    

這段代碼產(chǎn)生的效果如下：

CSS中position屬性怎么用


這是設(shè)定TRBL之后的效果(設(shè)置TRBL以瀏覽器左上角為原點(diǎn))，當(dāng)沒有設(shè)置TRBL時(shí)（沒有設(shè)置TRBL是以父級(jí)對(duì)象的坐標(biāo)為原點(diǎn)），即將div1改成如下代碼時(shí)

.div1{
            width:200px;
            height:200px;
            background:#0099FF;
            /*沒有設(shè)定TRBL*/
            position:absolute;
    }


則效果如下：

CSS中position屬性怎么用


 2、relative（相對(duì)定位）

relative是相對(duì)的意思，顧名思義就是相對(duì)于元素本身在文檔中應(yīng)該出現(xiàn)的位置來(lái)移動(dòng)這個(gè)元素，可以通過(guò)TRBL來(lái)移動(dòng)元素的位置，實(shí)際上該元素依然占據(jù)文檔中原有的位置，只是視覺上相對(duì)原來(lái)的位置有移動(dòng)。具體案例如下：





position:relative定位

    html,body,div{
                    margin:0;   
                    padding:0;  
                    list-style:none;
    }
    .center{
                margin:30px;
                border:#999999 solid 10px;
                width:400px;
                height:300px;
                background:#FFFF00;
    }
    .div1{
            width:200px;
            height:150px;
            background:#0099FF;
            position:relative;
            top:-20px;
            left:0px;
    }
    .div2{
            width:400px;
            height:150px;
            font-size:30px;
            font-weight:bold;
            color:#fff;
            background:#FF0000;
    }



    
        
        position:relative定位測(cè)試
    

代碼產(chǎn)生的效果如下：

CSS中position屬性怎么用


3、relative與absolute的結(jié)合使用

在網(wǎng)頁(yè)設(shè)計(jì)時(shí)經(jīng)常會(huì)用到浮動(dòng)來(lái)對(duì)頁(yè)面進(jìn)行布局，但是浮動(dòng)所帶來(lái)的不確定因素卻很多（例如：IE瀏覽器的兼容問(wèn)題）。相對(duì)來(lái)說(shuō)，在有些布局中定位使用會(huì)更加簡(jiǎn)單、快捷、兼容性更好（relative與absolute相結(jié)合來(lái)使用），下面通過(guò)網(wǎng)頁(yè)中的一個(gè)實(shí)例（網(wǎng)頁(yè)中的head部分）進(jìn)行說(shuō)明，具體代碼如下：






html,body,div,ul,li,a{
                    margin:0;   
                    padding:0;  
                    list-style:none;
}
a, a:hover{
 color:#000;
 border:0;
 text-decoration:none;
}
    #warp,#head,#main,#foot
{
    width: 962px;
}
/*設(shè)置居中*/
#warp{
    margin: 0 auto;
}
#head{
            height:132px;
            position:relative;
}
.logo{
        position:absolute;
        top:17px;
}
.head_pic{
            position:absolute;
            top:17px;
            left:420px;
}
.sc{
            position:absolute;
            right:5px;
            top:12px;
}
.sc a{
            padding-left:20px;
            color:#666;
}
.nav{
        width:960px;
        height:42px;
        line-height:42px;
        position:absolute;
        bottom:0px;
        background:url(img/nav_bj.jpg) no-repeat center;
}
.nav ul{
            float:left;
            padding:0 10px;
}
.nav li{
            float:left;
            background:url(img/li_bj.jpg) no-repeat right center;
            padding-right:40px;
            padding-left:20px;
            text-align:center;
            display:inline;
}
.nav li a{
                font-size:14px;
                font-family:Microsoft YaHei !important;
                white-space:nowrap;
}
.nav li a:hover{
                    color:#FBECB7;
}




    
        
            
            
            
                
                
                
            
            
                
    
                    
  • 首頁(yè)
    • 
                    
  • 關(guān)于我們
    • 
                    
  • 團(tuán)隊(duì)文化
    • 
                    
  • 公司動(dòng)態(tài)
    • 
                    
  • 資訊參考
    • 
                    
  • 業(yè)務(wù)中心
    • 
                    
  • 合作銀行
    • 
                    
  • 聯(lián)系我們
    • 
                

            
        
        
        
    

效果如下圖：

CSS中position屬性怎么用

以上是“CSS中position屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！


網(wǎng)站標(biāo)題：CSS中position屬性怎么用
網(wǎng)頁(yè)路徑：http://weahome.cn/article/gcsepj.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部