position定位干货

定位

• Position-设置定位方式
• top,right,bottom,left,z-index --设置位置

top right bottom left

image

元素边缘距参照物的边缘的距离

Demo:




    
    
    


    
sample

---

z-index

image

z轴上的排序:默认为z-index:0; 正值越大,在z轴上越在上面,在下面的会被覆盖.

z-index:-value;值可为负值

是不是值越大约在上面呢?不一定

z-index栈

image

上图有两个定位元素,如果给z-index:1;元素这个定位,父元素设为z-index:9; z-index:100;的元素的祖先元素设为z-index:1; z-index红色元素盖在了绿色元素上

Demo:




    
    
    


    
sample 0
    
sample 1

---

position

• position: static | relative | absolute | fixed

position:relative

• 仍在文档流中
• 参照物为元素本身
• 可以改变z轴上的层级
• 使用场景:绝对定位元素的参照物

image

Demo:




    
    
    


    

        
相对定位元素的前序元素
        
sample
        
相对定位元素的后序元素
    

---

position:absolute

• 默认宽度为内容宽度
• 脱离文档流(浮起来了)
• 参照物为第一个定位祖先/根元素
• 使用场景:轮播头图

轮播头图定位静态实现

Demo:




    
    
    


    

        
绝对定位元素的前序元素
        
sample
        
绝对定位元素的后序元素
    

---

position:fixed(固定定位)

• 默认宽度为内容宽度
• 脱离文档流
• 参照物为视窗
• 使用场景:固定顶栏 遮罩

Demo:




    
    
    


    

        
绝对定位元素的前序元素
        
sample
        
绝对定位元素的后序元素
    

遮罩




    
    
    


    

    
content area

固定顶栏




    
    
    


    
top bar
    
main content area

---

使用定位怎么做布局?看个DEMO

三行自适应布局

    
    
    


    
head
    

      
content area
    
    
foot