[交流] CSS样式中的使用z-index属性控制元素堆叠顺序 ...

小七 于 5-18 12:58 发表在  建站交流[高级] 7633
       网页设计样式过程中有时候会让几个元素有堆积叠加的效果,也就是让指定的元素显示在前面还是后面的问题,这个用css可以非常方便的控制,z-index属性设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,也可以用立体的坐标轴来理解,xy轴组成一个平面,也就是我们看到的页面,z轴垂直于这个平面,z-index的值如果为正数,则里我们更近,反之,负数就越远。, o; d$ `( d2 [) I7 v% p) `2 O( k  l' r/ r/ I6 i. ?( F# g$ N+ W3 S  ^) O
" b# a: V/ C4 L9 b$ S5 P7 P; y3 y) J8 O8 C8 G# j  A! R+ d. d# \
      下面我们通过案例来定义3个div块,分别通过position定位,让其有叠加的效果,再通过z-index来控制堆叠顺序,让其中某个块显示在前面或者后面。第一次先不加z-index属性,只用position来定位3个div,测试代码如下:
搜外七街 www.SEOwhy7.com + z: c, f& a7 C) T* o
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" M" w# C+ n! P( G, s8 u& B+ f* X" [( n8 C- g3 V3 A7 j0 R
<html xmlns="http://www.w3.org/1999/xhtml">: F, j+ ?6 L" L+ ?5 `1 S! ^+ l7 R9 E( |$ V7 E
<head>1 e0 ^, ?4 H3 y; U1 F+ Z: E4 U/ E* q5 s% q, p
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
搜外七街 www.seowhy7.com <title>无标题文档</title>0 t! Z0 I2 i+ H9 o3 t7 S; P. ^0 x' C6 v/ R
<style type="text/css">3 `9 W6 Z# Q& Z! b; C+ }4 w2 Y' O$ c
.testone{2 ?' D" h2 I! t1 y2 G) Q. f1 y! G2 z! E1 E5 u$ h" X% r( q! n+ f+ B
             width:150px;3 x2 H  {$ A, H5 k, C( H/ ]  Q! U3 [! j
             height:50px;! R5 L( j7 Y/ r* O. l% A' j' r, a
             background-color:#FF0000;$ p+ e% v5 a9 L3 N, f- Q" z4 ~6 u# i. }& @
             position:absolute;" N0 y0 l2 y- _7 L6 X2 [  e1 c# f$ R  m1 Y8 Z' P8 @. b5 c0 R0 ~$ L/ p$ U  V, ~
             top:50px;# O" |. [/ {) C) Q. a# D* n+ c9 a8 u5 p1 m9 s- T1 K9 y
             left:50px;            }8 ?# u# D' ?* N3 q+ y2 a. |7 b9 I, P& i- U% F) ^$ q9 {# e
.testtwo{$ o: b& T4 v" ?! T. n+ ~% _( k3 B$ a- H& _) z0 `) P, J( V- D+ o3 j1 x1 X; I- Y( K5 ]9 \) f7 F
             width:150px;2 J; z( h7 U: G3 w# Q5 m7 z; N- p( X! _; g4 a
             height:50px;) s' E% A" j3 Q, y1 H" K2 o7 I! g  u, Y, o0 p
             background-color:#00FF00;
搜外七街 www.seowhy7.com              position:absolute;8 t8 w9 i* ~/ y* T! i1 ~0 y* m* I: _5 ?* X, x
             top:60px;" a( [  w0 i% `3 ?! h, v- \! c) R+ a. z2 W3 N! d
             left:60px;* o, B  \6 ~  B" c6 U8 o) ~& b* _4 C: {1 w  H4 B7 D7 \- z, |! o0 h' u) J
            }5 Y2 _4 Y# B# p* u1 v4 _' K  K0 J9 l& d6 M
.testthree{. g7 l' P% R& c% o' {, h
             width:150px;9 u2 |7 J: z0 P) Q3 V4 H% c; P% r7 t# s. `. s* E/ {4 k4 j+ ~8 ~
             height:50px;: V8 a, y% A0 C  L) J! m, A2 D7 i7 ]# R
             background-color:#0000FF;4 R' i" [) m, L) K. s2 p3 ~4 Y5 m3 F8 U" I
             position:absolute;6 f$ H& q% R( ^5 Q# [* R4 X/ x
             top:70px;: i$ |8 S+ f; c, S( A3 @- z! S+ W8 H# E: M% X0 w' ]% O
             left:70px;; N  d3 o  \) s7 ^+ X% ?* o' x% y3 f
            }; H) p6 n4 |5 v; @" m, X0 l, C) x) ^- O9 u6 C3 w* F# Y: U5 D
) @* T  d% P5 @- M6 E, L$ x' V" k
</style>3 v% |+ P2 [. h9 E" e+ f6 a" s$ x3 V2 P$ Y
</head>( w* _# W" D5 A( O# Y' s' C( X( }5 ^
3 d0 J. i1 t. ?" z" x# B5 r6 ^% F% l1 O" m# t$ F( B" `& I: N, U3 V# `7 f% f9 _' M
<body>( z/ G2 Y! u, V6 h/ t& q7 m' I+ p- V. k5 V4 _5 n/ \7 }
   <div class="testone">seowhy demo one</div>
搜外七街 www.seowhy7.com    <div class="testtwo">seowhy demo two</div>$ D  o7 j9 C" d' ^1 ]! z5 s; r" `$ a6 ~1 g' o3 l) J- r" Q% {$ `3 C9 Y1 _6 r- W
   <div class="testthree">seowhy demo three</div>: G: P8 a* u" K& _, q- Q) X  F, f3 S. q% T8 v* E4 B# l
</body>7 H) z: A+ m. |; T8 g8 j4 I* T; |2 ^( h4 a( _3 S
</html>$ [4 K9 j  C, q) d5 u) T  i
! i7 K. q& |4 M: A) P5 I1 b2 m  O: `) p& r/ i" _+ j4 g2 P
       通过效果可以看出,3个div默认是由离我们更远的地方堆积走向离我们更近的地方,也就是先写的div在底下,后面写的div在上面。有时候需要调整这个叠放顺序,就需要用到z-index这个属性了,设置方法也很简单,数值可以是负数,数值较大的处于前面,离用户更近,反之同理,也比较好记忆。下面我们通过案例让第一个div(红色块)处于最上面,第二个绿色块处于中间,第三个蓝色块处于最下面,只需要在第一个div对应的css里面加入z-index,赋予相应的数值即可,案例中我们给testone增加z-index:1,给testtwo增加z-index:0,给testthree增加z-index:-1,其他代码部分跟上面的完全一样,这里就不贴出来了,直接看网页效果;( t" l+ F8 M9 a# p4 o! U2 ]) Q4 B) L, ?" e0 g' r3 t8 i) @/ h: d
' C* |& Q6 f" q1 e" w: M! _$ ^& T+ @3 c3 j% w7 {" I
       还有一个堆叠效果需要特别说明,如果只给第一个div添加z-index属性值1,另外两个div留空,结果是第一个红色块处于最上层,离用户最近,第二个div(绿色块)处于最底层,第三个div(蓝色块)处于中间,说明不加z-index属性的时候是默认状态,而这个默认值是auto,显示的时候就是position的默认堆叠顺序,也就是z-index只对当前的div有效,其他的保持默认排序效果。这个知识点的代码与效果大家可以自行验证,理解会更加深刻。- P( G/ ], i# f4 I9 S6 J, N
! T& H9 N5 u. V: W+ k7 [3 Y( [( r4 ]( a2 f4 N1 Z
2 ]. ~. o7 J3 K1 J! j% ]6 b* l' E
( ]; j. V! a/ E# M2 }) [7 r* ?5 D4 q& a3 w, k" X6 L3 D& K1 F% Q
5 {9 ?! F6 g! n- q8 q
3 z* O" M: a8 `  M% u3 r+ v0 X! _( T' J
 
个性签名玩转七街

评论 使用道具 举报

评论

帮你查询到 7 条优质的评论,通过实名认证可以查询更多优质的评论
  • 落痕思 Lv.6 SEO长空啸傲 发表于 5-19 15:16
    网页设计样式过程中有时候会让几个元素有堆积叠加的效果,也就是让指定的元素显示在前面还是后面的问题

    评论 使用道具 举报

  • 楼主 管理员 发表于 5-20 14:42
    星小火 发表于 2017-5-20 09:55; {) b6 {2 b! y3 E( Y- H+ Y; Q3 h! c- w( W, c. t5 d0 O2 n( a$ l/ d) ^  e" f/ `0 o+ T
    搜外论坛要做技术转型了么
    , E, C- A6 n4 N/ l) R6 d! A( k
    这些是seo的周边知识,很多seo工作中多少会接触到,会一点对工作开展有帮助,即使是开源的cms,会一些样式,可以让页面变的更加美观

    评论 使用道具 举报

  • 我有我道 Lv.6 SEO长空啸傲 发表于 5-20 17:45
    通过position定位,让其有叠加的效果,再通过z-index来控制堆叠顺序,让其中某个块显示在前面或者后面。第一次先不加z-index属性,只用position来定位3个div

    评论 使用道具 举报

您需要登录后才可以查看更多的评论 登录|立即注册 用QQ账号登录
搜外七街:SEO培训_SEO优化排名技术_网络营销推广建站培训
        搜外七街(SEOwhy7.COM)是互联网最大的搜索引擎优化排名技术、SEO培训、网络营销、网络推广、建站等综合bbs社区论坛站长学习培训网站,致力于培养学员。
七街事务:点击这里给我发消息
快速回复 返回顶部 返回列表