相对定位.布局

最新推荐文章于 2021-03-18 20:21:45 发布

iteye_8986

最新推荐文章于 2021-03-18 20:21:45 发布

阅读量101

点赞数

分类专栏： javascript CSS 文章标签：相对定位.布局

本文链接：https://blog.csdn.net/iteye_8986/article/details/82447673

版权

javascript CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


<html>
  <head>
     <style type="text/css">
        *{
           margin:0;
           padding:0;
        }
        #id1{
           position:relative;
           border:1px solid;
        }
        #id2{
           position:relative;
           boreder:1px solid;
           width:100px;
           height:100px;
        }
        #id3{
           position:retive;
           border:1px solid;
           width:100px;
           height:100px;
        }
     </style>
     <script type="text/javascript">
        function createDialog(){
            var dialogs=document.getElementById("dialogs");//获取id
            var noSizeDiv=document.createElement("div");//插入一个div
            noSizeDiv.style.width=0;//设置该div的宽度和高
              noSizeDiv.style.height=0;

            var div=document.createElement("div");
            var index=dialogs.children.length;//编号
              div.style.position="relative";
            div.style.height="100px";
            div.style.width="100px";
            div.style.border="1px solid";
            div.style.left=(100+20*index)+"px";
            div.style.top=(100+20*index)+"px";

            noSizeDiv.appendChild(div);
            dialogs.appendChild(noSizeDiv);
        }

        function increaseHeight(){
            var div=document.getElementById("id1");
            div.style.height=(20+parseInt(div.style.height))+"px";//增加20px
        }
  </head>
  <body>
        <button onclick="increaseHeight()">增高</button>
        <button onclick="createDialog()">增高</button>
        <div id="dialogs" style="height:2000px;">
  	  <div style="width:0;height:0"> //套一个空的div
  	     <div id="id1" style="left:100px;top:100px;width:100px;height:100px"></div>
  	  </div>
  	  <div style="width:0;height:0">
  	     <div id="id2" style="left:120px;top:120px;"></div>
  	  </div>
  	  <div style="width:0;height:0">
  	     <div id="id3" style="left:140px;top:140px;"></div>
  	  </div>
        </div>  
   </body>
</html>