css集 —— position

  /*
     position：static | relative | absolute | fixed | center* | page* | sticky*;
     适用于：除display属性定义为：table-column-group | table-column 之外的所有元素;
     
     static: 对象遵循常规流 4个定位偏移属性不会被应用;
     relative: 对象遵循常规流 4个定位偏移属性的设置不会影响常规流中的任何元素;
     absolute: 对象脱离常规流 4个定位偏移属性的设置以离自身最近的定位祖先元素，如没有则回溯到body元素;
     fixed: 对象脱离常规流 偏移定位以窗口为参考 不会随滚动条滚动; 
     center*: 对象脱离常规流 偏移定位是以定位祖先元素的中心点为参考，盒子在其包含容器垂直水平居中;
     page*: 对象脱离常规流 元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式;
     sticky*: 对象在常态时遵循常规流 它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed 该属性的表现是现实中你见到的吸附效果

     center和page目前兼容性基本还不支持 sticky兼容性也不太好


     clip：rect(<number>|auto <number>|auto <number>|auto <number>|auto);
     依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值
     上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0；
     右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即 右-下 方位的auto值为盒子的实际宽度和高度；

     示例：clip:rect(auto 50px 20px auto)
         ：上边不剪切，右边从左起第50个像素开始剪切直至最右边，下边从上起第20个像素开始剪切直至最底部，左边不剪切
   
    说明：
     1.检索或设置对象的可视区域。区域外的部分是透明的。
     2.这个属性将被废弃，推荐使用 clip-path 代替，在过渡阶段，仍然会存在一段时间。
     3.必须将position的值设为absolute或者fixed，此属性方可使用。
  */

.position{
    position: relative;
    width: 200px;height: 200px;
    border: 1px solid red;
    /*left: 10px;top: 10px;*/
    /*display: table-column-group;*/
    /*display: table-column;*/
}
.clip{
    position: absolute;
    width: 50px;height: 50px;
    background: #ccc;
    left: 10px;top: 10px;
    clip: rect(0 0 35px 10px); /* 剩余大小为：0px*0px */
    clip: rect(0 auto 35px 10px); /* 剩余大小为：40px*35px */
}
.box1{
    width: 200px;height: 200px;
    border:1px solid red;
}
.center{
    width: 200px;height: 50px;
    border:1px solid red;
    text-align: center;
    line-height: 50px;
    position: absolute;
    left: 50%;top: 50%;
    margin: -25px 0 0 -100px;
}