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

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷(xiāo)
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷(xiāo)
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

   
   
   
   
   
   
.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}   
.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;}   
   
   
    
   
   
   
position:absolute;   
left:100px;   
top:200px;   

   
   
   
   
   
   
.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}   
.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative}   
   
   
    
   
   
   
position:absolute;   
left:100px;   
top:200px;   

效果如下圖

所以，如果頁(yè)面元素的定位，想要定義在父元素內(nèi)，而不受顯示器分辨率，瀏覽器窗口大小等限制時(shí)，建議采用B種方案。

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

如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，首先它將出現(xiàn)在它所在的位置上。然后通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的原始起點(diǎn)進(jìn)行移動(dòng)。（再一點(diǎn)，相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他框）。

relative的確是相對(duì)于自己來(lái)定位的,父DIV設(shè)置了position:relative 沒(méi)有給出值，它自身是沒(méi)有效果的
但是對(duì)于它的子元素起到了參照作用

3、position的fixed   fixed總是以body為定位時(shí)的對(duì)象，總是根據(jù)瀏覽器的窗口來(lái)進(jìn)行元素的定位，通過(guò)"left"、 "top"、 "right"、 "bottom" 屬性進(jìn)行定位。

關(guān)于position用法貌似還有很多，小編語(yǔ)言組織能力不是太好，總結(jié)一下用法：

當(dāng)你需要做一個(gè)有下拉二級(jí)菜單效果時(shí)，父元素你需要position:relative，而里面的下拉元素則需要position:absolute。

當(dāng)你需要做一個(gè)頁(yè)面漂浮的廣告，或者做一個(gè)返回頁(yè)面頂端的按鈕是，你需要position:fixed。

通常我們使用position:absolute；position:relative進(jìn)行絕對(duì)定位布局，通過(guò)CSS進(jìn)行定義定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute進(jìn)行定位，同時(shí)不要忘記使用left、right、top、bottom的配合定位具體位置。絕對(duì)定位如果父級(jí)不使用position:relative，而直接使用position:absolute絕對(duì)定位，這個(gè)時(shí)候?qū)?huì)以body標(biāo)簽為父級(jí)，使用position:absolute定義對(duì)象無(wú)論位于DIV多少層結(jié)構(gòu)，都將會(huì)被拖出以為父級(jí)（參考級(jí)）進(jìn)行絕對(duì)定位。絕對(duì)定位非常好用，但切記不要濫用，什么地方都用，這樣有時(shí)會(huì)懶得計(jì)算距離上、下、左、右間距，同時(shí)可能會(huì)造成CSS代碼臃腫，更加經(jīng)驗(yàn)適當(dāng)使用，用于該使用地方。
在絕對(duì)定位時(shí)候我們可以使用css z-index定義css層重疊順序。
同時(shí)left、right、bottom、top的數(shù)值，可以使用（Photoshop）PS切片工具獲取準(zhǔn)確的數(shù)值。

末了，小編在提醒一句，如果你在你的父DIV里面的子DIV使用了position:absolute屬性定位，而父DIV沒(méi)有做任何定義（父DIV里面已經(jīng)被其他元素填充占據(jù)），還想要子DIV定義起到作用，這個(gè)時(shí)候子DIV你可以不用left、top、right、bottom來(lái)定義，可以使用margin-top、margin-left來(lái)定義，但是此種方法在ie6/7下和ie8/9/10/11、火狐、谷歌下面的位置是不一樣的，針對(duì)ie6/7你需要用到css Hack，代碼如下：

   
   
   
   
   
   
.demo{position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}   
.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}   
   
   
    
   
   
   
   
position:absolute;   
margin-left:100px;   
margin-top:200px;   
   
   
   
   

效果如下圖

使用CSS Hack之后  代碼：

   
   
   
   
   
   
.demo{position:absolute; margin-left:100px; margin-top:-400px;*margin-top:200px;*margin-left:-500px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}   
.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}   
   
   
    
   
   
   
   
position:absolute;   
margin-left:100px;   
margin-top:200px;   
   
   
   
   

在各個(gè)版本的瀏覽器下的  效果如下

此種方法最好不要使用   在不同版本瀏覽器下需要來(lái)回的用CSS Hack調(diào)整！

感謝各位的閱讀！關(guān)于“CSS中的position屬性有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！