html中的position屬性可以對元素進行定位，通過position的不同的值，可以配合方位屬性，讓元素顯示頁面中的任何乙個位置。
position有四個值：
static，預設值，去除元素的定位。也就是不進行定位relative，相對定位，元素相對於自身原來的位置進行定位。
absolute，絕對定位，元素相對於當前父元素進行定位。
fixed，固定定位，元素相對於瀏覽器頁面視窗進行定位。
怎麼定位？css中提供了四個不同方位屬性給我們進行定位。
top：表示距離頂部指定的長度示例：bottom:表示距離底部指定的長度
left：表示距離左邊指定的長度
right：表示距離右邊指定的長度
1.relative定位
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
style
>
.box
style
>
head
>
<
body
>
<
div
class
="box"
>
div>
body
>
html
>;
2.absolute定位
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
style
>
.box
.son
style
>
head
>
<
body
>
<
div
class
="box"
>
<
div
class
="son"
>
div>
div>
body
>
html
>
absolute定位有乙個很常用的用途，就是當希望子元素在父元素的正**時，可以這樣操作：
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
style
>
.box
.son
style
>
head
>
<
body
>
<
div
class
="box"
>
<
div
class
="son"
>
div>
div>
body
>
html
>
3.fixed定位
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
style
>
.one
.two
style
>
head
>
<
body
>
<
div
class
="one"
>
div>
<
div
class
="two"
>
div>
body
>
html
>
設定了定位後可以設定層級。
通過z-index進行設定，所有的元素的z-index預設值為0，我們可以通過z-index，設定不同的值來控制定位元素之間的覆蓋。值越大的，層級越高，值越小，層級就越低，如果定位元素的層級為-1，則會被普通沒有定位的元素進行覆蓋。示例：
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
style
>
.one
.two
.three
style
>
head
>
<
body
>
<
div
class
="one"
>
div>
<
div
class
="two"
>
div>
<
div
class
="three"
>
div>
body
>
html
>
html中設定錨點定位
需求 需要在頁面內做乙個導航 設定錨點 h2 我是標題一 h2 h2 我是標題二 h2 h2 我是標題三 h2 在頁面內設定錨點，做乙個索引，點選相應的索引標題就跳轉到相應的段落 那麼就只要在標題所在的html標籤裡面設定乙個id，然後鏈結過去即可，可以像下面這樣設定id h2 id a 我是標題一...
CSS定位 元素層級 設定背景
一 定位 當開啟了元素的定位 position屬性值是乙個非static的值 時，二 相對定位 通常偏移量只需要使用兩個就可以對乙個元素進行定位，box2 box4 三 絕對定位 box2 s1四 固定定位 box2 五 元素的層級 z index.box2 box3 父元素的層級再高，也不會蓋過子...
css Position定位屬性與層級關係
今天同事發現乙個有意思的問題，關於position的層級關係的，他要不說我也沒注意過 測試後果然有趣，有待深入研究 1 doctype html 2 html 3 head 4 meta charset utf 8 5 title css中position定位屬性與層級關係 title 6 styl...