欢迎来到科站长!

HTML5

当前位置: 主页 > 网页制作 > HTML5

HTML5 层的叠加的实现

时间:2020-07-07 21:51:31|栏目:HTML5|点击:

这篇文章主要介绍了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 层的叠加的实现的文章就介绍到这了

上一篇:使用HBuilder制作一个简单的HTML5网页

栏    目:HTML5

下一篇:HTML5图片层叠的实现示例

本文标题:HTML5 层的叠加的实现

本文地址:https://fushidao.cc/wangyezhizuo/210.html

广告投放 | 联系我们 | 版权申明

申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1205677645 | 邮箱:1205677645@qq.com

Copyright © 2018-2024 科站长 版权所有冀ICP备14023439号