CSS中的絕對定位

css

中的絕對定位

左直拳我發現，

css中的絕對定位並不如印象中的那樣，一定要給

left

和top

乙個具體特定的數值，如：

<

divid

="divclosestool"

style

="position:absolute;left:100px;top:100px;background-color:red;font-size:

18pt

;color:yellow;">

一人有乙隻馬桶

div>

其實用相對值也是可以的：

<

divid

="div1"

style

="position:absolute;left:50%;top:50%;background-color:red;font-size:

18pt

;color:yellow;"><

b>

在水**

b>

div>

這樣就真的顯示在頁面**。

還可以使用「

auto」。

「auto

」應該是自動。怎麼個自動法？

我也不清楚。不過，因為想做個下拉列表的緣故，就應用了一回。大姑娘坐花轎，頭一回。

得出的結論是元素會自動受所在容器約束。

<

table

border

="1"

style

="width:450px;"

align

="center">

<

tr><

tdalign

="center"

width

="33%">

謊言td

><

tdalign

="center"

width

="33%">

可惡的謊言

td><

tdalign

="center"

width

="33%">***可惡的謊言

td>

tr>

<

tr>

<

td>

td>

<

td>

td>

<

td>

<

divid

="div2"

style

="position:absolute;left:auto;top:auto;background-color:green;font-size:

18pt

;color:white;width:200px;height:150px;z-index:-1;"><

b>狗屎b

>

div> td

>

tr>

<

tr>

<

tdcolspan

="3"

style

="color:red;">

十天九地菩薩搖頭怕怕霹靂金光雷電掌。一掌打出，方圓幾百里無論人畜蝦蟹都化為飛灰

td>

tr>

table

>

其實寫在單元格裡的內容都受單元格的約束，不管有沒有絕對定位。但為什麼還要用絕對定位？我認為絕對定位有乙個很大的好處，就是超然於頁面格局排布之外，不受周圍的元素位置影響。

結果將以上html**放在乙個頁面中，即會產生如下結果：

(csdn的blog真爛)

完整**如下：

doctype

html

public

"-//w

3c//dtd xhtml 1.0 transitional//en"

"">

<

html

xmlns

="">

<

head

>

<

title

>

左直拳擺地攤

title

>

head

>

<

body

>

<

divid

="divmenu"

style

="position:absolute;left:100px;top:100px;background-color:blue;font-size:

18pt

;color:yellow;"><

b>

一人有乙隻馬桶

b>

div>

<

divid

="div1"

style

="position:absolute;left:50%;top:50%;background-color:red;font-size:

18pt

;color:yellow;"><

b>

在水**

b>

div>

<

table

border

="1"

style

="width:450px;"

align

="center">

<

tr><

tdalign

="center"

width

="33%">

謊言td

><

tdalign

="center"

width

="33%">

可惡的謊言

td><

tdalign

="center"

width

="33%">***可惡的謊言

td>

tr>

<

tr>

<

td>

td>

<

td>

td>

<

td>

<

divid

="div2"

style

="position:absolute;left:auto;top:auto;background-color:green;font-size:

18pt

;color:white;width:200px;height:150px;z-index:-1;"><

b>狗屎b

>

div> td

>

tr>

<

tr>

<

tdcolspan

="3"

style

="color:red;">

十天九地菩薩搖頭怕怕霹靂金光雷電掌。一掌打出，方圓幾百里無論人畜蝦蟹都化為飛灰

td>

tr>

table

>

body

>

html

>

CSS中的絕對定位

css中的絕對定位 左直拳我發現，css中的絕對定位並不如印象中的那樣，一定要給left和top乙個具體特定的數值，如 divid divclosestool style position absolute left 100px top 100px background color red font...

CSS中的絕對定位

css中的絕對定位 左直拳我發現，css中的絕對定位並不如印象中的那樣，一定要給left和top乙個具體特定的數值，如 divid divclosestool style position absolute left 100px top 100px background color red font...

CSS中的絕對定位

css中的絕對定位 左直拳我發現，css中的絕對定位並不如印象中的那樣，一定要給left和top乙個具體特定的數值，如 divid divclosestool style position absolute left 100px top 100px background color red font...