相对定位与绝对定位演示

作者: 清茶杯 | 来源:发表于2017-04-10 18:12 被阅读0次

relative与absolute

具体效果为：
![

Paste_Image.png ]

代码为： <style>
div{
width:200px;
height:200px;
background:yellow;
position:relative;

          }
          span{
          width:50px;
          height:50px;
          background:red;
          
            text-align:center;
            line-height:50px;
             position:absolute;
             }
            .span1 {
             left:75px;
             }
             .span2 {
             top:80px;
             right:0px;
             
             }
             .span3{
            top:150px;
            left:75px;
             }
             .span4{
             top:80px
             }
          


       </style>
 </head>
       <body>
        <div>
        <span class="span1">span1</span>
        <span class="span2">span2</span>
        <span class="span3">span3</span>
        <span class="span4">span4</span>
        </div>