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

最新推荐文章于 2024-08-17 22:24:13 发布

豪莲

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量286

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/rongrong_love_lc/article/details/52922806

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

所有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

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学生11-CSS用z-index进行层次堆叠

十一、CSS用z-index进行层次堆叠 CSS可以处理高度、宽度、深度三个维度。 value:z-index:数字[数字较大的元素将叠加在数字较小的元素之上] html文件如下: <html> <head> <title>Color例子</title> <link rel="stylesheet"
复制链接

扫一扫

专栏目录