絕對(duì)定位

position:

absolute

特性：

1、脫離文檔流，定位元素占據(jù)的位置會(huì)釋放

2、原點(diǎn)計(jì)算：如果該元素做了定位，那么就去找它做了定位的父元素（找最近的）作為原點(diǎn)基準(zhǔn)，如果父元素都沒做定位，則以瀏覽器(0,0)作為原點(diǎn)基準(zhǔn)。

3、對(duì)內(nèi)嵌元素定位后，設(shè)置寬高屬性就會(huì)有效果

應(yīng)用場(chǎng)景：

一般情況下，絕對(duì)定位用在下拉菜單、焦點(diǎn)圖輪播、彈出數(shù)字氣泡、特別花邊等場(chǎng)景

相對(duì)定位

position:

relative

1、不脫離文檔流，定位元素占據(jù)的位置不會(huì)被釋放/

2、原點(diǎn)計(jì)算：以父級(jí)元素作為原點(diǎn)基準(zhǔn)，若沒有父級(jí)元素則以瀏覽器(0,0)為基準(zhǔn)。

一般的應(yīng)用：父相子絕

3、父元素為相對(duì)定位，子元素為絕對(duì)定位，文檔元素不會(huì)受影響。

4、父元素提供相對(duì)定位后，子元素以父元素為基準(zhǔn)來(lái)進(jìn)行定位。

應(yīng)用場(chǎng)景：

相對(duì)定位一般情況下很少自己?jiǎn)为?dú)使用，都是配合絕對(duì)定位使用，為絕對(duì)定位創(chuàng)造定位父級(jí)而又不設(shè)置偏移量

固定定位

position:

fixed

1、脫離了文檔流

2、原點(diǎn)計(jì)算：以瀏覽器(0,0)作為原點(diǎn)基準(zhǔn)，盡管父元素做了定位也不會(huì)影響它的原點(diǎn)

基準(zhǔn)。

應(yīng)用場(chǎng)景：

一般在網(wǎng)頁(yè)中被用在窗口左右兩邊的固定廣告、返回頂部圖標(biāo)、吸頂導(dǎo)航欄等

注意：使用定位后會(huì)激活如下5個(gè)屬性

left | right | top | bottom | z-index

z-index

改變定位后的疊放順序

取值范圍：-1~9999

其他：

設(shè)置網(wǎng)頁(yè)元素的透明度

opacity: 0~1;

filter: opacity(0.2) | contrast(0.2)

絕對(duì)定位（absolute）代碼案例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>絕對(duì)定位</title>

<style type="text/css">

/*絕對(duì)定位：

*1、脫離文檔流，做了定位后它占據(jù)的位置會(huì)釋放。

*2、原點(diǎn)計(jì)算：如果該元素做了定位，那么就去找它做了定位的父元素（最近）作為原點(diǎn)基準(zhǔn)，若果父元素

* 都沒做定位，則以瀏覽器(0,0)作為原點(diǎn)基準(zhǔn)。

*3、對(duì)內(nèi)嵌元素做了定位后，它的寬度高度屬性就會(huì)有效。

*/

*{

padding: 0px;

margin: 0px;

}

.box-father{

width: 500px;

height: 500px;

margin-left: 500px;

background-color: yellow;

position: absolute;

}

.son{

width: 400px;

height: 400px;

margin-left: 20px;

background-color: black;

position: absolute;

}

.box{

width: 300px;

height: 300px;

background-color: blue;

/*絕對(duì)定位*/

position: absolute;

/*激活4個(gè)屬性*/

left: 150px;

/*right: ;*/

top: 100px;

/*bottom: ;*/

}

.box2{

width: 400px;

height: 400px;

background-color: red;

}

span{

width: 200px;

height: 200px;

background-color: green;

/* position: absolute;*/

float: left;

}

</style>

</head>

<body>

<div class="zx"> 

<div class="box-father"> 

<div class="son"> 

<div class="box"> 

</div>

</div>

</div>

</div>

<div class="box2">

</div>

<span>我是span</span>

</body>

</html>

相對(duì)定位（relative）代碼案例：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>相對(duì)定位</title>

<style type="text/css">

/*相對(duì)定位：

*1、沒有脫離文檔流,元素定位了占據(jù)的空間不會(huì)被釋放

*2、原點(diǎn)計(jì)算：根據(jù)父元素的位置來(lái)做基準(zhǔn)，如果沒有父元素則以瀏覽器（0,0）作為基準(zhǔn)。

* 父相子絕：

* 1、文檔元素不會(huì)受影響

* 2、父元素提供相對(duì)定位后，子元素就以父元素為基準(zhǔn)來(lái)做絕對(duì)定位。

*/

*{

padding: 0px;

margin: 0px;

}

.box-father{

width: 500px;

height: 500px;

margin-left: 100px;

background-color: yellow;

/*相對(duì)定位*/

/*position: relative;

left: 100px;*/

}

.box{

width: 200px;

height: 200px;

background-color: blue;

position: absolute;

right: 0px;

bottom:0px;

}

.box-one{

width: 400px;

height: 400px;

background-color: red;

}

/*.box2{

width: 400px;

height: 400px;

background-color: red;

}*/

</style>

</head>

<body>

<div class="box-father">

<div class="box-one">

</div>

<div class="box">

</div>

</div>



</body>

</html>

固定定位（fixed）代碼案例：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>固定定位</title>

<style type="text/css">

/*固定定位：

*1、脫離了文檔流

*2、原點(diǎn)計(jì)算：按瀏覽器(0,0)來(lái)作為基準(zhǔn)

*/

*{

padding: 0px;

margin: 0px;

}

body{

height: 1800px;

background-image: url(img/logo.png);

}

.box-father{

width: 500px;

height: 500px;

background-color: yellow;

position: relative;

}

.box{

width: 200px;

height: 200px;

background-color: blue;

/*固定定位*/

position: fixed;

right: 0px;

bottom: 0px;

}

</style>

</head>

<body>

<div class="box-father">

<div class="box">

</div>

</div>

</body>

</html>