• CSS用法之zindex


    语法:

    z-index: auto | <integer>

    默认值auto

    取值:

    auto:
    遵从其父对象的定位
    <integer>
    用整数值来定义堆叠级别。可以为负值。

    说明:

    检索或设置对象的层叠顺序。
    • 并级的对象,此属性参数值越大,则被层叠在最上面。
    • 如两个对象的此属性具有同样的值,那么将依据它们在HTML文档中流的顺序层叠,写在后面的将会覆盖前面的。
    • 必须定义position属性值为absolute、relative或fixed,此取值方可生效。
    • 对应的脚本特性为zIndex

    代码:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <title>z-index_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
    <meta name="copyright" content="www.doyoe.com" />
    <style>
    .z1,.z2,.z3{position:absolute;200px;height:100px;padding:5px 10px;color:#fff;text-align:right;}
    .z1{z-index:1;background:#000;}
    .z2{z-index:2;top:30px;left:30px;background:#C00;}
    .z3{z-index:3;top:60px;left:60px;background:#999;}
    </style>
    </head>
    <body>
    <div class="z1">z-index:1</div>
    <div class="z2">z-index:2</div>
    <div class="z3">z-index:3</div>
    </body>
    </html>
               
    效果图


  • 相关阅读:
    Ajax 发送OPTION请求
    用cssText批量修改样式
    原生js操作HTML DOM
    每天干的啥?(2018.09)
    每天干的啥?(2018.08)
    每天干的啥?(2018.07)
    每天干的啥?(2018.06)
    每天干的啥?(2018.05)
    每天干的啥?(2018.04)
    每天干的啥?(2018.03)
  • 原文地址:https://www.cnblogs.com/cici_liang/p/2201839.html
Copyright © 2020-2023  润新知