css元素定位

我們可以使用css的position屬性來設定元素的定位型別，postion的設定項如下：

absolute 生成絕對定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於上乙個設定了相對或者絕對或者固定定位的父級元素來進行定位，如果找不到，則相對於body元素進行定位。

fixed 生成固定定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於瀏覽器視窗進行定位。

static 預設值，沒有定位，元素出現在正常的文件流中，相當於取消定位屬性或者不設定定位屬性

inherit 從父元素繼承 position 屬性的值

定位元素特性

絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素

定位元素層級

定位元素是浮動的正常的文件流之上的，可以用z-index屬性來設定元素的層級

典型定位布局

1、固定在頂部的選單

2、水平垂直居中的彈框

3、固定的側邊的工具欄

4、固定在底部的按鈕

相對定位

我是乙個span

lang
="en"
>
>
charset
="utf-8"
>
>
絕對定位title
>
type
="text/css"
>
.box1
.box2
.box3
.box4
.s1style
>
head
>
>
class
="box1"
>
div>
class
="box5"
>
class
="box4"
>
class
="box2"
>
div>
div>
div>
class
="box3"
>
div>
class
="s1"
>
我是乙個spanspan
>
body
>
html
>

lang
="en"
>
>
charset
="utf-8"
>
>
固定定位title
>
type
="text/css"
>
.box1
.box2
.box3
style
>
head
>
style
="height
: 5000px;
">
class
="box1"
>
div>
class
="box4"
style
="width
: 300px;
height
: 300px;
background-color
: orange;
position
: relative;
">
class
="box2"
>
div>
div>
class
="box3"
>
div>
body
>
html
>

CSS 元素的定位

css定位令你可以將乙個元素精確地放在頁面上你所指定的地方。聯合使用定位與浮動 參見第13課 你將能夠建立多種高階而精確的布局。本課我們將討論以下內容 把瀏覽器視窗想象成乙個座標系統 如果我們要把這個標題放置在距文件頂部100畫素 左邊200畫素的地方，我們可以在css中輸入以下 h1 得到的顯示效...

CSS控制元素定位

元素定位屬性 position static absolute fixed relative static 元素按自身預設方式顯示，並沒有什麼卵用 absolute 絕對定位，按照父元素為基準，進行偏移，如果沒有父元素，就以body元素為基準定位。一定要記住是相對于父元素的定位 position元素...

CSS之元素定位

css中元素定位有如下情況 1 流 靜態定位 預設 position static 不能指定位置 2 浮動定位 float left right 不能嚴格指定位置 3 相對定位 position relative 使用left top right bottom進行定位，仍占用頁面空間 以 其自己的靜...