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:
                 *                 开启元素的固定定位(也是绝对定位的一种)
                 *
                 *     
                 */
 
                 /**
                  *     当position属性设置为absolute时，则开启了元素的绝对定位,绝对定位有以下特点:
                  *         1>.开启绝对定位，会使元素脱离文档流;
                  *         2>.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化;
                  *         3>.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般清空下，开启 了子元素的绝对定位都会同时开启父元素的相对定位),如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位，
                  *         4>.绝对定位会使元素提示一个层级;
                  *         5>.绝对定位会改变元素的性值，内联元素变成块元素，块元素的高度和宽度默认都被内容撑开;
                  */
                position: absolute;
                left: 100px;
                top: 10px;
            }
            
            .box3{
                width: 300px;
                height: 300px;
                background-color: deeppink;
            }
 
             .box4{
                 width: 300px;
                 height: 300px;
                 background-color: cornflowerblue;
                 /*开启box4相对定位*/
                 position: relative;
             }
             
             span{
                 /**
                  *     开启绝对定位后发现内联标签竟然有了块标签的性值啦，因为可以甚至宽和高
                  */
                 position: absolute;
                 width: 500px;
                 height: 100px;
                 background-color: greenyellow;
             }

        </style>
    </head>
    <body>
        <div class="box1"></div>
        
        <div class="box4">
            <div class="box2"></div>
        </div>
        <div class="box3"></div>
        
        <span>我是一个span标签</span>
    </body>
</html>

 

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

 

posted @ 2018-02-10 21:42  尹正杰  阅读(3573)  评论(0)  编辑  收藏  举报