CSS布局用于指定一个元素在文档中的定位方式。指定了left和right,与direction有关。基本上，可以看出

1.position

用于指定一个元素在文档中的定位方式。

top,right,bottom,left决定了该元素的最终位置，

当top和bottom都被指定时（不是auto）,top优先；
指定了left和right,与direction有关。

position属性的值

static

元素使用正常的布局，即元素在文档常规流中当前的布局位置，
此时top,right,bottom,left和z-index属性都无效

relative

元素放在未添加定位时的位置，
使用top,right,bottom,left后，会在不改变页面布局的前提下调整元素的位置（该元素未添加定位时的位置会留白）
对table-caption,table-row,table-column,table-cell等表格相关的元素无效

absolute

元素被移出正常文档流，不会为元素预留空间（原来的位置不留白）
使用top,right,bottom,left后，元素相对于最近的position值不是static的父级元素进行偏移
z-index有效

fixed

元素被移出正常文档流，不会为元素预留空间（原来的位置不留白）

使用top,right,bottom,left后，元素相对于屏幕的窗口进行偏移，且滚动屏幕时元素位置不变

创建新的层叠上下文

当父级元素的transform,perspective,filter属性有其一不是none，偏移的参照物由屏幕窗口改为该父级元素

sticky

基本上，可以看出是position:relative和position:fixed的结合体——当元素在跨越特定阈值前为相对定位，之后为固定定位。阈值由top,right,bottom,left设定。
sticky注意事项：

父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果。如果你的position:sticky无效，看看是不是某一个祖先元素设置了overflow:hidden，移除之即可。
父级元素设置和粘性定位元素等高的固定的height高度值，或者高度计算值和粘性定位元素高度一样，也没有粘滞效果。
同一个父容器中的sticky元素，如果定位值相等，则会重叠；如果属于不同父元素，且这些父元素正好紧密相连，则会挤开原来的元素，形成依次占位的效果。

例子

absolute

        <head>
            <style type="text/css">
                .box{
                    background:royalblue;
                    width:100px;
                    height: 100px;
                    float: left;
                    margin: 5px;
                }
                .two{
                    position: absolute;
                    top:50px;
                    left: 50px;
                }
            </style>
        </head>
        <body>
            <div class="box">one</div>
            <div class="box two">two</div>
            <div class="box">three</div>
            <div class="box">four</div>
        </body>

relative

        <head>
            <style type="text/css">
                .box{
                    background:royalblue;
                    width:100px;
                    height: 100px;
                    float: left;
                    margin: 5px;
                }
                .two{
                    position: relative;
                    top:50px;
                    left: 50px;
                    z-index: -1;
                    background:red
                }
            </style>
        </head>
        <body>
            <div class="box">one</div>
            <div class="box two">two</div>
            <div class="box">three</div>
            <div class="box">four</div>
        </body>

fixed

<head>
      <style type="text/css">
           .box {
              background: red;
              width: 100px;
              height: 100px;
              margin: 20px;
              color: white;
            }
            #one {
              position: fixed;
              top: 80px;
              left: 10px;
            }
            .outer {
              width: 500px;
              height: 300px;
              overflow: scroll;
              padding-left: 150px;
            }
        </style>
</head>

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>

sticky

#one { 
    position:-webkit-sticky
    position: sticky; 
    top: 10px; 
}

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。