HTML&CSS基础-相对定位

　　　　　　　　　　　　　HTML&CSS基础-相对定位

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

 

一.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相对定位</title>
        
        <style type="text/css">
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /**
                 *     定位:
                 *         定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素
                 *        通过 position属性设置元素定位，常用有以下可选值:
                 *             static:
                 *                 默认值，元素没有开启定位
                 *             relative:
                 *                 开启元素的相对定位
                 *             absolute:
                 *                 开启元素的绝对定位
                 *             fixed:
                 *                 开启元素的固定定位(也是绝对定位的一种)
                 *
                 *     
                 */
                
                /**
                 *     当元素的positon属性设置为relative时，则开启了元素的相对定位
                 *         1>.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化;
                 *         2>.相对定位是相对于元素在文档流中原来的位置进行定位;
                 *         3>.相对定位的位置是不会脱离文档流;
                 *         4>.相对定位会使元素提示一个层级，即它可以覆盖移动后的元素;
                 *         5>.相对定位不会改变元素的性值，块元素还是块元素，内联元素还是内联元素，因为它始终没有脱离文档流;
                 */
                position: relative;
                
                /**
                 *     当开启了元素的定位(position属性值是一个非static的值)时,可以通过left,right,top,bottom四个属性来设置元素的偏移量:
                 *         left:
                 *             元素相对于其定位位置的左侧偏移量
                 *         right:
                 *             元素相对于其定位位置的右侧偏移量
                 *         top:
                 *             元素相对于其定位的上边的偏移量
                 *         bottom:
                 *             元素相对于其定位位置下边的偏移量
                 * 
                 *     通常偏移量只需要使用两个就可以对一个元素进行定位，一般会选择一个水平方向的偏移量和一个垂直方向的偏移量来为一个元素进行定位。
                 */
                left: 100px;
                top:200px
                
            }
            
            .box3{
                width: 200px;
                height: 200px;
                background-color: deeppink;
            }
            
            span{
                position: relative;
                /**
                 *     注意，我们没有显示使用"display: block;"将span变为快标签，span依旧是一个内联标签
                 */
                width: 100px;
                height: 200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        
        <span>我是一个span标签</span>
    </body>
</html>

 

二.浏览器打开以上代码渲染结果

 

 

posted @ 2018-01-22 19:39  尹正杰  阅读(675)  评论(0)  编辑  收藏  举报