DIV位置调整代码

最新推荐文章于 2021-06-04 01:31:28 发布

chuluxie3918

最新推荐文章于 2021-06-04 01:31:28 发布

阅读量2.5k

点赞数 3

原文链接：https://my.oschina.net/u/4191619/blog/3097109

版权

本文转载于:猿2048网站2018.3.29 DIV位置调整代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           /*固定在页面某一位置*/
           #a{
               width: 20px;
               height: 20px;
               background-color: black;
               position: fixed;
               bottom: 10px;
               left: 10px;
           }
           /*相对于原位置所做的位移*/
           #b{
               width: 80px;
               height: 80px;
               background-color: red;
               position: relative;
               top: 60px;
               left: 60px;
           }
           /*相对于上一级界面做的位移*/
           #c{
               width: 20px;
               height: 20px;
               background-color: #8A2BE2;
               position: absolute;
               bottom: 30px;
               left: 30px;
           }
           /*浮动,向左*/
           #d{
               width: 20px;
               height: 20px;
               background-color: black;
               float: left;
           }
           /*浮动,向右*/
           #e{
               width: 20px;
               height: 20px;
               background-color: green;
               float: right;
           }
           /*清除上面div的格式影响*/
           .clear{
               clear: both;
           }
       </style>
   </head>
   <body>
       <div id="a">
       </div>
       <div id="b">
       </div>
       <div id="c">
       </div>
       <div class="clear"></div>
       <div id="d">
       </div>
       <div id="e">
       </div>

   </body>
</html>