xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

CSS 定位 relative && absolute 问题？

谁能解释一下，为什么div使用 relative是设置right,bottom 后，看不到div 呀，哪里多出来的 top , left 属性负值呀？

（已测试了所有最新的浏览器，自动添加的top , left 属性负值）

demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS 定位：relative &&  absolute</title>
    <style> 
        *{
            margin: 0;
            padding: 0;
        } 
        html,body{
             100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            color: red;
            box-sizing: border-box;
            overflow: hidden;
        }    
       .relative{            
            background-color: #f0f;
             100px;
            height: 100px;
            position: relative;            
            right: 100px;
            bottom: 100px;
            /*
            	position: relative; 浏览器，自动补全 :
            	left == -right;
            	top == -bottom; 
            */
        }       
    </style>
</head>
<body>
    <div class="box">
        <div class="relative">
            <!--comments-->
        </div>
    </div>
</body>
</html>

2. chrome 中修改后，

3. 同样，设置 left,top 后，多出来 right/bottom 的负值属性？

demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS 定位：relative &&  absolute</title>
    <style> 
        *{
            margin: 0;
            padding: 0;
        } 
        html,body{
             100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            color: red;
            box-sizing: border-box;
            overflow: hidden;
        } 
        .box{
             1000px;
            height: 600px;
            border: 1px solid red;
            /*overflow: hidden;*/
        }    
        .box .relative{            
            background-color: #f0f;
             100px;
            height: 100px;
            position: relative;            
            right: 50px;
            bottom: 50px;
            /*
            	position: relative; 浏览器，自动补全 :
            	left == -right;
            	top == -bottom; 
            */
        }
        .box .relative-new{
            background-color: #0f0;
             100px;
            height: 100px;
            position: relative;            
            right: 0;
            bottom: 0;
        }       
    </style>
</head>
<body>
    <div class="box">
        <div class="relative">
            <h3>relative</h3>
        </div>
        <div class="relative-new">
            <h3>relative-new</h3>
        </div>
    </div>
</body>
</html>

demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS 定位：relative &&  absolute</title>
    <style> 
    	*{
    		margin: 0;
    		padding: 0;
    	} 
    	html,body{
    		 100%;
    		height: 100%;
    		background: rgba(0,0,0,0.3);
    		color: red;
    		box-sizing: border-box;
    		overflow: hidden;
    	} 
    	.box{
    		 1000px;
    		height: 600px;
    		border: 1px solid red;
    		/*overflow: hidden;*/
    	}    
        .box .relative{            
            background-color: #0f0;
             100px;
            height: 100px;
            position: relative;            
            right: 100px;
            bottom: 100px;
            /*
            */
        }
        .box .relative-new{
        	background-color: #0f0;
             100px;
            height: 100px;
            position: relative;            
            left: 100px;
            top: 100px;
        }
        .box .absolute{            
            background-color: #0f0;
             100px;
            height: 100px;
            position: absolute;            
            right: 100px;
            bottom: 100px;
            /*
            	position:absolute;
            	right: 200px;
            	bottom: 200px;
            	这样才好使！
            	//position:absolute; float脱离文档流
            */
        }        
    </style>
</head>
<body>
    <div class="box">
        <div class="relative">
            <h3>relative</h3>
        </div>
        <div class="relative-new">
            <h3>relative-new</h3>
        </div>
        <div class="absolute">
        	<h3>absolute</h3>
        </div>
    </div>
</body>
</html>