前后图层定位

2017-06-07 18:36:00
admin
原创
321
<html>

<head>

      <title>运用z-index属性示例</title>
      <base href=http://www.ybao.org>
      <style type="text/css">

           <!--

           .layer{

               position:absolute;

               left:80px;

               top:50px;

               width:300px;

               height:200px;

           }/*定义了类layer,以及它在网页中的显示位置*/

           .layer1{

               position:absolute;

               left:140px;

               top:50px;         

               width:1in;

               height:1in;

           } /*定义了类layer1,以及它在网页中的显示位置*/

           -->

      </style>

</head>

<body>

      <img src="/data/upload/201705/f_f98e04fa9ff2aed692bebb9f6c0be82e.jpg"

           class="layer" id="image" style="z-index:1">

           <!--导入一张图片,使它为layer类,z-index属性定为1,位置处于最下方-->

      <div class="layer" id="text1" 

           style="color:#ffff33;z-index:2" >这段文字将覆盖在图片上。

      </div><!--定义一段文字的颜色和z-index属性为2,处于中间位置-->

      <img src="http://code.ybao.org/demo/src/home.gif"

           class="layer1" id="image" style="z-index:3">

           <!--导入第二张图片,使它为"layer1"类,z-index属性为3,位置处于最上方-->

</body>

</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227