CSS基础学生11-CSS用z-index进行层次堆叠

来源:互联网 发布:机顶盒的电视直播软件 编辑:程序博客网 时间:2024/06/08 17:06

所有CSS基础学习文档下载地址:http://download.csdn.net/detail/rongrong_love_lc/9663463

十一、CSS用z-index进行层次堆叠    CSS可以处理高度、宽度、深度三个维度。    value:z-index:数字[数字较大的元素将叠加在数字较小的元素之上]    html文件如下:      <html>        <head>            <title>Color例子</title>            <link rel="stylesheet" type="text/css" href="color.css"/>        </head>        <body>        <div >           <img id="box1" src="image1.jpg" alt="imag1" />           <img id="box2" src="image2.jpg" alt="imag2" />               <img id="box3" src="image3.png" alt="imag3" />        </div>          </body>      </html>    CSS文件如下:      #box1{position:absolute;            top:20px;            left:50px;            color:blue;            z-index:1;            }      #box2 {color:red;            position:absolute;            top:140px;            left:70px;            z-index:2;            }      #box3 {color:red;             position:absolute;             top:180px;             left:90px;             z-index:3;             }
0 0
原创粉丝点击