CSS 定位之position全面了解

發(fā)布時間：2016-07-08 10:23:58 作者：佚名

下面小編就為大家?guī)硪黄狢SS 定位之position全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在前端網(wǎng)頁布局中，在同一平面上布局，我們大都采用float屬性來定位網(wǎng)頁元素的位置。但是涉及到彈出層、浮層、頁面廣告插件等等，都需要CSS中的position屬性來定位了，對于初學(xué)者來說經(jīng)常分不清楚是應(yīng)該用position屬性的absolute值、relative值、fixed值等等，下面我們就position屬性基本的這三個值的用法做一些簡單的介紹，希望對初學(xué)者有些幫助。

1、position的absolute（絕對定位）

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

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

CSS Code復(fù)制內(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;}
</style>
</head>
<body>
<div class="all">
<div class="demo">
position:absolute;<br />
left:100px;<br />
top:200px;<br />
</div>
</div>
</body>
</html>
</span>

效果如下圖：

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

CSS Code復(fù)制內(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>

效果如下圖

所以，如果頁面元素的定位，想要定義在父元素內(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é)一下用法：

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

<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 Hack之后代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

<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>