小菜鸟谈position属性

 1.子元素使用absolute,默认情况下相对浏览器窗口，即1.（1）。

（1）父级元素无position,子元素用的absolute,子元素的top  left等都是相对于浏览器左上角。

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }     
 5 #first { 
 6     width: 200px; 
 7     height: 100px; 
 8     border: 8px solid red; 
 9     } 
10 #fir {
11     width: 90px; 
12     height: 80px; 
13     border: 3px solid red; 
14     position: absolute; 
15     top: 10px; 
16     left: 20px;    
17     }

1 <div id="first"> first
2     <div id="fir">hahah</div>
3 </div>  

 

 （2）父级元素有position,absolute或者relative都可以此时子元素的位置相对于父元素。在（1）的条件上将#first{}里加position:absolute;效果将会是这个样子：

 

2.(1)如果父级无position,则以文本流最后一行元素底部开始计算，再配上top ,left等。在1.（1）基础上把#fir{}中的absolute改为relative;文本增加一些，效果如图所示：

 

（2）如果父级元素加上position属性，无论属性是神马，效果同2.（1）.

补充：在1.的情况下，加padding无影响。在2.情况下，貌似也没影响，就是left  top 这些属性是相对于文本流而言的。

 

转载于:https://www.cnblogs.com/gaoxuerong123/p/6411440.html