物体position:absolute后设置left:50%发生的有趣小事

今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下

一 准备知识

①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽高

②一个内敛元素设置position:absolute会自动转为一个块状元素

那么我提出三个问题:

problem01:一个没有设置宽高的块状元素position:absolute,top:0;left:0,它的宽高如何显示?

problem02:一个内联元素position:absolute,top:0;left:0,它的宽高如何显示?

problem03:一个元素position:absolute,left:50%发生什么有趣小事?

二 针对 problem01:一个没有设置宽高的块状元素position:absolute,top:0;left:0,它的宽高如何显示? 的回答

测试代码如下:

   DOCTYPE html  > 
   html  > 
       head  > 
           meta   charset  ="utf-8"   /> 
           meta   name  ="viewport"   content  ="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"   /> 
           title  >  title  > 
           style   type  ="text/css"  >  
            .div1  {  
                width  :   300px  ;  
                height  :   300px  ;  
                border  :   1px #000 solid  ;  
                overflow  :   hidden  ;  
                position  :   relative  ; 
             }  
            .div2  {  
                position  :   absolute  ;  
                background-color  :   red  ;  
                top  :  0  ;  
                left  :  0  ; 
             } 
           style  > 
       head  > 
       body  > 
           div   class  ="div1"  > 
               div   class  ="div2"  >  
         我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
                div  > 
           div  > 
       body  > 
   html  >  

查看更多关于物体position:absolute后设置left:50%发生的有趣小事的详细内容...