定位网页元素（position）

一、position的属性

属性值

1.static（默认值）

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

默认值遵循正常文档流

2.偏移量方向

偏移量方向

3.relative（相对定位）

相对定位元素的定位是相对其正常位置，移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。下面举例说明：

 
 




这是位于正常位置的标题
这个标题相对于其正常位置向右移动

相对定位

4.absolute（绝对定位）

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于浏览器基准。绝对定位使元素的位置与文档流无关，因此不占据空间。元素位置发生偏移后。它原来的位置不会被保留下来。

 
 




绝对定位

绝对定位

5.fixed（固定定位）

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。固定定位使元素的位置与文档流无关，因此不占据空间。

.box{
    height: 100px;
    width: 100px;
    background: red;
    position: fixed;
    bottom: 100px;
    right: 100px;
}

固定定位

二、z-index属性（设置堆叠顺序）

z-index 属性指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。设置了position属性时，z-index属性值可以设置各元素之间的重叠高低。z-index值大的位于值小的层上方。

z-index堆叠顺序

 
 




图片在文字下方

z-index属性

三、设置元素透明度的两种方法

1.opacity属性

值：从0到1（完全透明到不透明）

 
        
        
        
    
    
        

            

                
背景1
            
            

                
背景2
            
        
    

opacity

2.rgba属性

值：从0到1（完全透明到不透明），且值位于rgba第四位。
例如：rgba（145，232，178，0.5）

 
        
        
        
    
    
        

            

                
背景1
            
            

                
背景2
            
        
    

rgba

3.两者的区别

有opacity属性的所有后代元素都会继承 opacity 属性，而rhba后代元素不会继承透明属性。就是说opacity属性内的所有内容都会被改变透明度。而rgba只作用于背景。