第十四课--Position(定位)

a.
position 属性的五个值：
static ：没有定位
relative ： 相对定位
fixed ：固定定位
absolute ：绝对定位
sticky ：粘性定位

b.重叠的元素
position:absolute;
z-index:-1;
此二者搭配使用，z-index 确定与元素的层次的高低。

    
    absolute


    .h1 {
        position: absolute;
        left: 100px;
    }

    .h2 {
        position: relative;
    }

    .h3 {
        position: absolute;
        top: 100px;
        left: 100px;
    }


h1
h2
h3

    
    fixed


    img {
        position: fixed;
        top: 500px;
        right: 10px;
    }



123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123

    
    relative


    h2 {
        position: relative;
        left: 30px;
    }


很好
你好

    
    static


    h1{
        position: static;
    }


很好
你好

sticky

div.sticky {

  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}




尝试滚动页面。
注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。

我是粘性定位!


  
滚动我
  
来回滚动我
  
滚动我
  
来回滚动我
  
滚动我
  
来回滚动我