学习博客：【CSS】定位

1. 相对定位 position: relative

相对于自己原来的位置进行偏移，仍然在标准文档流中，原来的位置会被保留

相对定位前：

相对定位后：

        #first{
            background: #ff53cf;
            border: 1px dashed #12f611;
            position: relative;/*相对定位*/
            top: -30px;
            left: 20px;
        }

2. 绝对定位 position: absolute

没有父级元素定位时，相对浏览器页面定位

若父级元素存在定位，则相对父级元素定位，并且在父级元素范围内移动
相对于父级或浏览器的位置，指定偏移，绝对定位则不在标准文档流中，原来的位置会被保留

无父级元素定位：

        #father{
            border: 1px solid #666;
            padding: 0;
            /*position: relative;*/
        }

        #second{
            background: red;
            border: 1px dashed #616;
            position: absolute;
            right: 30px;
        }

有父级元素定位：

        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }

        #second{
            background: red;
            border: 1px dashed #616;
            position: absolute;
            right: 30px;
        }

3. 固定定位 position: fixed

div:nth-of-type(1){  /*绝对定位 相对于浏览器*/
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    div:nth-of-type(2){ /*固定定位 fixed */
      width: 70px;
      height: 50px;
      background: yellow;
      position: fixed;
      right: 0;
      bottom: 0;
    }