CSS基础之定位

·        定位就是将盒子定在某个位置。定位=定位模式+边偏移。所谓的定位模式，决定元素的定位方式。通过CSS的position属性来设置，他的值可以分为四种：静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。所谓的边偏移即定位了盒子移动到最终的位置，有top、bottom、left和right四个属性。分别具有以下含义：

边偏移属性	实例	描述
top	top：50px;	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom：50px;	底端偏移量，定义元素相对于其父元素下边线的距离
left	left：50px;	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right：50px;	右侧偏移量，定义元素相对于其父元素右边线的距离

     静态定位

       静态定位就是默认定位方式，无定位的意思。语法如下：

选择器{position：static}；

        静态定位按照标准流特性摆放位置，没有边偏移。而且在设计过程中很少用到静态定位。

     相对定位

        相对定位就是元素移动的时候，相对于原来的位置来说的（俗称自恋型定位）；语法如下;

选择器{
    position：relative；
}

     

          其特点：

        1）是相对于自己原来的位置来移动的（移动的时候参照自己原来的位置）

        2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他（不脱标，继续保持原来的位置）。

     绝对定位

       绝对定位是元素在移动位置的时候，相对于祖先元素（有爹拼爹，没有爹拼爷爷，没有祖先则以浏览器为准）来说的（俗称拼爹型）。

      语法格式：

选择器{
    position：absolute；
}

        绝对定位的特点：

        1）、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（也就是document文档）。

        2）、如果祖先元素没有因为（相对、绝对、固定），则以最近一级有定位祖先元素为参考点移动位置。

        3）、绝对定位不再占有原先的位置。（脱标）

     关于子绝父相

        子绝父相（子级使用绝对定位，父级使用相对定位）。

         1）子级绝对定位，不会占有位置，可以放到父盒子里面任何一个位置，不会影响其他兄弟盒子

         2）父盒子需要定位限制子盒子在父盒子内显示

         3）父盒子布局是，需要占有位置，因此父亲只能是相对定位。

          相对定位经常用来作为绝对定位的父级。因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位，当然子绝父相也不是绝对的，如果父元素不需要占有位置，子绝父绝也会遇到的。

    固定定位

      固定定位是元素固定在浏览器可视区域位置，主要应用场景是页面滚动时元素的位置不会改变。语法如下：

选择器{
    position：fixed；
}

定位的特点：（务必记住）
1.以浏览器的可视窗口为参照点移动元素

     跟父元素没有任何关系，不随滚动条移动

2.固定定位不在占有原先的位置
     固定定位也是脱标的，其实固定定位也可以看做是一种特殊的地绝对定位。

    固定定位的小技巧：固定在版心右侧位置：

/*设置盒子的大小*/ 
.box {
      width: 800px;
      height: 1000px;
      background-color: #8bd3af;
      margin: auto;
  }

.circlefix {
/*设置固定定位*/
      position: fixed;
      left: 50%;/*设置定位的盒子走到浏览器可视区的一半位置*/
      margin-left: 400px;/*在设置margin-left多走版心宽度的一半*/
      top: 450px;
      width: 80px;
      height: 100px;
      background-color: #5e6662；
}

        效果如下：

     粘性定位

       可以认为是相对定位和固定定位的混合：语法如下：

选择器{
    position：sticky；
    top：10px;
}

粘性定位的特点
      1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
      2.粘性定位占有原先的位置（相对定位特点）
      3.必须添加top、left、 right、 bottom其中一个才有效

定位的总结

定位的总结

定位模式	是否脱标	移动位置	是否常用
static	否	不能使用边偏移	很少
relative	否（占有位置）	相对于自身位置移动	常用
absolute	是（不占有位置）	带有定位的父级	常用
fixed	是（不占有位置）	浏览器可视区	常用
sticky	否（占有位置）	浏览器可视区	当前阶段使用

1.一定记佳住相对定位、固定定位绝对定位两个大的特点： 1）.是否占有位置（脱标否）2）以谁为基准点移
动位置
2. 学习定位重点学会子绝父相

定位拓展

      绝对定位的居中算法

left：50%；/*left走50%，父容器宽度的一半*/
margin-left：-自身宽度  /*margin 赋值，向左移动自身宽度的一半*/