css定位有四種不同類型，position值分別為：static（靜態(tài)定位）， relative（相對(duì)定位），absolute（絕對(duì)定位），fixed（固定定位）。下面本篇文章就來給大家介紹一下，希望對(duì)大家有所幫助。
1、relative（相對(duì)定位）
相對(duì)定位的偏移參考元素是元素本身，不會(huì)使元素脫離文檔流。元素的初始位置占據(jù)的空間會(huì)被保留。相對(duì)定位元素常常作為絕對(duì)定位元素的父元素。并且定位元素經(jīng)常與z-index屬性進(jìn)行層次分級(jí)
2、absolute（絕對(duì)定位）
絕對(duì)定位元素以父輩元素中最近的定位元素為參考坐標(biāo)，如果絕對(duì)定位元素的父輩元素中沒有采用定位的，那么此絕對(duì)定位元素的參考對(duì)象是html,元素會(huì)脫離文檔流。就好像文檔流中被刪除了一樣。并且定位元素經(jīng)常與z-index屬性進(jìn)行層次分級(jí)
3、fixed(固定定位)
位移的參考坐標(biāo)是可視窗口，使用fixed的元素脫離文檔流。并且定位元素經(jīng)常與z-index屬性進(jìn)行層次分級(jí)
4、static （靜態(tài)定位）
默認(rèn)值，元素框正常生成的，top left bottom right這幾個(gè)偏移屬性不會(huì)影響其靜態(tài)定位的正常顯示
1、外部樣式
格式：<link type="text/css" rel="stylesheet" href="css路徑" />
舉例：<link type="text/css" rel="stylesheet" href="layout.css"/>
用處：這種形式是把css單獨(dú)寫到一個(gè)css文件內(nèi)，然后在源代碼中以link方式鏈接。它的好處是不但本頁可以調(diào)用，其它頁面也可以調(diào)用，是最常用的一種形式。
備注：Rel：指明連接的是什么文件； Type：指明引入的文件的格式類型； Href：指明文件的路徑，以引入文件為基準(zhǔn)的相對(duì)路徑。
2、內(nèi)部樣式
格式： <style type="text/css">選擇器 {聲明1、聲明2………}</style>
這樣的話，該文件中的所有P標(biāo)簽都將應(yīng)用該style樣式，而不需要在沒一個(gè)html標(biāo)簽中寫。
用處：這種形式是內(nèi)部樣式表，它是以<style>和</style>結(jié)尾，寫在源代碼的head標(biāo)簽內(nèi)。這樣的樣式表只能針對(duì)本頁有效。不能作用于其它頁面
3、舉例：
<html>
<head>
<title></title>
<style>
P{
font-size:50px;
color:red;
text-deceration:line
}
</style>
</head>
<body>
</body>
</html>
4、行內(nèi)樣式：就是直接在html標(biāo)簽后面寫樣式代碼
<p style=”font-size:50px;color:red;text-deceration:line”>啊啊啊啊</p>
用處：這種在標(biāo)簽內(nèi)以style標(biāo)記的為內(nèi)部樣式，內(nèi)部樣式只針對(duì)標(biāo)簽內(nèi)的元素有效，因其沒有和內(nèi)容相分離，所以不建議使用。
5、導(dǎo)入樣式
@import url("/css/global.css");
鏈接樣式是以@import url標(biāo)記所鏈接的外部樣式表，它一般常用在另一個(gè)樣式表內(nèi)部。如layout.css為主頁所用樣式，那么我們可以把全局都需要用的公共樣式放到一個(gè) global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式鏈接全局樣式，這樣就使代碼達(dá)到很好的重用性。
6、CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個(gè)屬性和一個(gè)值組成。
屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開。
selector {property: value}
下面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為紅色，同時(shí)將字體大小設(shè)置為 14 像素。
在這個(gè)例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
提示：請使用花括號(hào)來包圍聲明。
css后代選擇器和子選擇器的區(qū)別介紹：
1 css后代選擇器語法：h1 em {color:red;} 表示的是從h1開始里面包含的所有的em元素變成紅色，h1為祖先，其他的em都是后代，即選中后代，不管是兒子還是孫子，只要是都會(huì)被選中，為后代選擇器。2、css子元素選擇器語法：h1>em{color:red;} 表示的是從h1開始里面的第一層em元素變成紅色，h1為祖先，em為兒子，就像世襲制一樣，只能傳給兒子，孫子和其他堂親都不行
在CSS中hover用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素，語法“標(biāo)簽選擇器:hover{樣式代碼;}”，用法：1、直接在懸浮元素上改變樣式；2、改變子元素的樣式；3、改變同級(jí)元素的樣式；4、改變就近元素的樣式等。
在CSS中有個(gè)hover屬性，當(dāng)鼠標(biāo)移上去的時(shí)候可以將其激活，它可以用來實(shí)現(xiàn)類似于js的一些功能。