HTML5 层的叠加的实现

posITion语法：
position : static absolute relative

position参数：

• static : 　无特殊定位，对象遵循HTML定位规则
• absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
• relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

position说明：
设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。

  html>
       head>
         title>
    层的定位/title>
       /head>
       style>
    div {
    height:300;
            width:300;
        }
    #d1 {
    position:absolute;
                           background-color:green;
                 left:2em;
                                   top:2em;
        }
     #d2 {
    position:absolute;
             background-color:blue;
             left:4em;
                                   top:4em;
         }
      #d3 {
    position:absolute;
              background-color:red;
              left:6em;
                                   top:6em;
          }
       /style>
       body>
         div id="d1">
                        　　      div id="d2">
                     　　      div id="d3">
                    　　     /body>
     /html>
    

到此这篇关于HTML5 层的叠加的实现的文章就介绍到这了,更多相关HTML5 层叠加内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！