在居中页面中使用层，最大的问题就是层的定位问题，当改变显示器分辨率后，层相对其它居中元素就会改变位置。本文介绍层相对其它居中元素不会错位的方法。
+ Z& b k3 s5 ?
, h. }* Q& R& R% d
层的绝对定位和相对定位
x8 _ Q1 `! E- r层的绝对定位代码：
0 Z1 b7 T0 O3 d) |- g
; L- X& _# x$ X/ [div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"/div
R7 Y1 F4 m/ E; e- i层的相对定位代码：
- B. t9 b" `: I5 L% U
div id="Layer1" style="position: relative; left:45px; top:25px; width:400px; height:155px; z-index:1"/div
; _0 @8 N" I3 ^在居中页面中，插入相对定位层代码，层的位置在页面居中。但是它变得不可移动，使用不够方便。
2 L$ O% t% {1 m& l+ b
插入绝对定位代码，当left和top含有正负数值，层就无法居中。当清除left和top属性后，层可以居中，相对页面其它居中元素没有错位现象。
, i" Y- O' E6 F' d3 @. e8 ?! R7 R' \7 q
0 S# @5 }% K& P: X - K5 \4 x; W4 D& H
* [. I8 K% V! T# _% R描绘层和插入层的差别% q! ~* N3 J/ K* p
使用描绘层:
/ y9 z7 r# v5 L7 v7 h& N% c) f6 P6 S, {" Y
; z9 A2 @" [! Y' h
, `! J7 d0 h9 H. D在一个居中的页面中，使用描绘层的代码：
" Q3 P( w7 N6 s5 A- ?2 y
& S/ m7 p4 z x
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
9 Y( U( N4 E9 V4 @8 S
html
) w/ j4 O( Y: {
head
- a7 n+ O& _' _' |% V) Pmeta http-equiv="Content-Type" content="text/html; charset=gb2312"
" w, i( R# q; c: A- K
titlediv/title
1 h" K) E4 {" l4 g1 ]% Q- y% H3 D/ W& K/head
, E6 d* o; F1 o5 a5 J" E0 L
body
: x c x" e& k/ V9 N Wdiv id="Layer1" style="position:absolute; left:40px; top:30px; width:265px; height:75px; z-index:1"/div
" L( x- t# l! r5 u2 a4 sdiv align="center"/div
# V9 O2 d% }' S; M3 l/body
; y; ?% k, A$ M" Z" o1 L+ U/html
5 G( Y8 e# n; U- j7 l. ` U使用插入层:
, H5 m# d' v; u. G' u* C
- Y& x) S, @% ^
5 m1 E# I- l$ |1 O
; o4 t) ~" |1 U9 m在一个居中的页面中，使用插入层的代码
; m3 q6 F3 Z; B- E: C
- [3 c0 B: A* p$ b% x# w# F! I7 \& `) m
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
) r4 f8 t' Y+ Z3 P, g( vhtml
* ^: ^3 h* V k' v9 j3 q2 r
head
) [5 a; f, B' ^8 n. \' G2 Kmeta http-equiv="Content-Type" content="text/html; charset=gb2312"
0 X+ K* u1 ~+ p+ I% q; Ptitlediv2/title
6 Z8 A" X2 E+ `5 W& U, b( b- {/head
: M" e6 e. o, b6 B3 g- T
body
- K% G+ }9 R7 r7 @div align="center"
3 Q6 M! a0 r W6 H5 {0 D- d4 h# W7 odiv id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"/div
, B" e, @9 p+ h! o
/div
" \; o* v6 w1 h) F1 c/body
6 K* ] @- L- ?- h' R* N1 M/html
" r: }1 `! Y% N- W1 f* o + Z* i. N: \3 l: f
# I, t& M+ O. v3 e
因为使用“描绘层”生成的代码不在居中代码
& A4 t( l& @8 Q/ [: t) V: x
" m1 a) m- H3 T6 w' Z( f7 S+ y; L) ~" E" R( E8 h: J5 n
( ?% F5 x* W, R+ p; A
之中，所以，在居中页面中，要使层相对其它元素没有错位现象，就必须使用插入层。
8 |1 _ v* U( _3 I2 C, K
2 P9 ~( B! l! G7 G0 k
, u/ R( S- j5 E! S) e
" @7 O; n" Y) H" |在居中页面中，常用两种方法，
实现层相对其它居中元素没有错位现象。
8 h2 ~! X# H3 g+ \5 l6 C5 k9 Q& F
使用插入层
6 L' v0 i# G+ S* t! t; ^1.在一个居中页面中，把插入点放在文档中，实例中把插入点放在表格中。
" _5 }+ O& U, r0 A- W
) Y4 q" ~5 w% B8 L; u: a" a1 D
1 r9 R& h! X8 S: j# ?
# u H! m# q$ [' x( h2.选择“插入”/“层”菜单。
$ L$ {' }" T& P/ Q1 H# {% B
$ x' A% g) ]" @' e# F4 W
) L% U C& E3 w0 C& D# l# w4 P
9 t: i3 ~$ }; `) {" y6 D3.在文档中插入了一个层。实例中，在表格中插入了一个层。在IE浏览器中测试，改变分辨率，层的内容相对其它居中元素都不会发生错位现象。
1 ], R; T" g. L
# k* S% i5 c: H$ o
! Q$ V/ _ j5 {# {, t
7 `0 j; P3 r7 L$ p9 p3 n2 p! ]在属性面板查看这个层的属性，这段插入层清除了“左”和“上”的值。
( v( d: p9 K, K6 L9 x3 ~# l6 S; N/ r% \$ a6 }, Z7 g4 B% |3 v$ O
; J7 |, |& G/ C3 z: Q: f0 T
* @+ T6 c, _: k, [8 I! C# \
这种方法，常用来制作弹出式菜单。
) m3 X6 j8 w' u$ j6 U
& t( O# [: q& i! p) V0 V7 t使用嵌套层1 n, P3 v/ x1 ?9 ~
嵌套层是其代码包含在另一个层中的层。
. P. ]# T: Q" T/ a: I在使用嵌套层之前，先要对层做一些参数设置。选择“编辑”/“参数选择”菜单，在“参数选择”对话框中，选中“Netscape 4 兼容性：插入层时固定大小”，这样制作的嵌套层就可以兼容Netscape 4浏览器。并且选中“嵌套：如果在层中则使用嵌套”。
6 j0 a% e, C: L0 m
. }- g- a: p) Z4 C/ y
2 T" V u1 s5 C3 C/ v9 O
E) y2 K+ b3 k$ I6 |( Z$ L打开层面板，不选中“防止重叠”。
1 y5 T- ?% {/ _/ i9 ?9 S: z; O
- J5 W" v4 m- E, c1 f! v% m- M' S) g
: @0 J+ s, H" W' N! }& m0 }
: H5 c7 m @' ^* i" ?# \: Y嵌套层：
0 M2 b' q9 `5 B F7 ?# r, }
在一个居中页面，插入一个表格，在表格中，插入一个层，这个层相对表格，不会发生错位。在这个层中，使用“插入”/“层”命令，插入一个子层（嵌套层），无论在页面中怎么移动这个子层，它的位置相对其它居中元素都不会错位。
; F& j' R+ B# ?
2 k9 `! |: g# l3 T2 `1 z1 c
5 i4 U! V$ a9 t9 t: }
% P! F" _. G( w8 m, e' P4 k( ?在一个插入层中，可以插入多个嵌套层，然后把嵌套层移动到需要的地方，这样在居中页面就可以随心所欲的使用层了。
' ` Z5 f ?3 X; _& }" {7 C
, E+ e# B( `' W* Z6 \
结论：居中页面，制作弹出菜单，使用“插入”/“层”命令；使用层布局和用层放置内容，使用嵌套层。
