码迷,mamicode.com
首页 > 其他好文 > 详细

绝对定位——absolution

时间:2018-10-11 10:25:30      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:属性   col   span   文档   默认   div   html   gre   --   

 <!--绝对定位:
            当position的属性值设置为absolution时,则开启了元素的绝对定位
      absolution的特性:
           1.开启了绝对定位,会使元素脱离文档
          2.但是开启绝对定位,如果不设置偏移量,则元素的位置不会发生变化
          3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位
                 如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
          4.绝对定位会使一个元素提升一个层级
          5.绝对定位会改变元素的性质
                         (1) 内联元素会变成块元素
                           (2)块元素的宽度和高度默认都会被内容撑开
          -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>postion</title>
        <style>
            .box1{
                width: 200px;
                height: 200px;
                background: red;                
            }
            .box2{
                width: 200px;
                height: 200px;
                background: yellow;
                position:absolute;
                left:200px;
                top:0px;    
            }
            .box3{
                width: 400px;
                height: 400px;
                background: green;
                position: relative;
                /*开启box4的相对定位*/                
            }
            .box4{
                width: 300px;
                height: 300px;
                background: papayawhip;    
            }
            .sp{
                width: 200px;
                height: 200px;
                background: cyan;
                position: absolute;
            }
        </style>
    </head>
    <body>
      
        <div class="box1"></div>
        <div class="box3"><div class="box4"><div class="box2"></div></div></div>
        
        <span class="sp">这是一个span</span>
    </body>
</html>

绝对定位——absolution

标签:属性   col   span   文档   默认   div   html   gre   --   

原文地址:https://www.cnblogs.com/goodgirl----xiaomei/p/9770481.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!