CSS中的position屬性有什么用-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)CSS中的position屬性有什么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

為麻山等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及麻山網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、成都做網(wǎng)站、麻山網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

1、position的absolute（絕對定位）

在這里position的absolute絕對定位我們分兩類來講：

A：給元素定義了position:absolute，其父框架沒有定義任何position屬性。此時的絕對定位就是相對于頁面四周最邊緣來進行定位的，位置將依據(jù)瀏覽器左上角的0點開始計算，絕對定位使元素與文檔流無關(guān)，因此不占據(jù)空間。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。其位置不受父框架的影響，只以頁面四周邊緣開始計算。代碼如下：

<span style="color: #008000;"><!doctype html>   
<html>   
<head>   
<meta charset="utf-8">   
<title>position</title>   
<style type="text/css">   
.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;}   
</style>   
</head>   
    
<body>   
<div class="all">   
<div class="demo">   
position:absolute;<br />   
left:100px;<br />   
top:200px;<br />   
</div>   
</div>   
</body>   
</html>   
</span>

效果如下圖：

CSS中的position屬性有什么用

B：給元素定義了position:absolute，其父框架定義了position:absolute\position:relative\position:fixed屬性。此時的絕對定位就是相對于父框架最邊緣最邊緣來進行定位的，絕對定位使元素與文檔流無關(guān)，因此不占據(jù)空間。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。其位置只在父框架內(nèi)做變化，代碼如下：

<span style="color: #008000;"><!doctype html>   
<html>   
<head>   
<meta charset="utf-8">   
<title>position</title>   
<style type="text/css">   
.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}   
</style>   
</head>   
    
<body>   
<div class="all">   
<div class="demo">   
position:absolute;<br />   
left:100px;<br />   
top:200px;<br />   
</div>   
</div>   
</body>   
</html>   
</span>

效果如下圖

CSS中的position屬性有什么用

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

2、position的relative（相對定位）

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

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

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

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

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

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

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

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

<span ><!doctype html>   
<html>   
<head>   
<meta charset="utf-8">   
<title>position</title>   
<style type="text/css">   
.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;}   
</style>   
</head>   
    
<body>   
<div class="all">   
<img src="1.jpg" width="600" height="600" />   
<div class="demo">   
position:absolute;<br />   
margin-left:100px;<br />   
margin-top:200px;<br />   
</div>   
</div>   
</body>   
</html>   
</span>

效果如下圖

CSS中的position屬性有什么用

使用CSS Hack之后代碼：

<span ><!doctype html>   
<html>   
<head>   
<meta charset="utf-8">   
<title>position</title>   
<style type="text/css">   
.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;}   
</style>   
</head>   
    
<body>   
<div class="all">   
<img src="1.jpg" width="600" height="600" />   
<div class="demo">   
position:absolute;<br />   
margin-left:100px;<br />   
margin-top:200px;<br />   
</div>   
</div>   
</body>   
</html>   
</span>

在各個版本的瀏覽器下的效果如下

CSS中的position屬性有什么用

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

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

當(dāng)前題目：CSS中的position屬性有什么用-創(chuàng)新互聯(lián)
本文地址：http://www.rwnh.cn/article32/pjepc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、微信小程序、面包屑導(dǎo)航、App開發(fā)、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

CSS中的position屬性有什么用-創(chuàng)新互聯(lián)