盒子的定位

定位

• 定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，可以压住其他盒子

• 定位=定位模式+边偏移

• 定位模式用于定位一个元素在文档中的定位方式，边偏移决定了元素的最终位置

• position为属性来定义

• 值 为static 静态定位。relative 相对定位 。absolute 绝对定位 。fixed 固定定位

• 相对定位relative

• 是元素移动位置的时候，相对它原来的位置来说的（自恋型）

• 当向top移动时，是相对自身的y轴向下移动

• 移动前的位置不会像浮动一样高度变成零，而是继续保留高度。后续的盒子不能占有其位置

• 绝对定位absolute（重要）

• 元素移动位置的时候，是相对它祖先元素来说的（拼爹型）

• 语法：position：absolute；

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准的定位

• 当父类没有定位而父类的父类有定位，则以父类的父类为准的定位

• 绝对定位没有保留位移之前盒子的位置

• 因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

• 固定定位fixed(重要)

• 固定定位是浏览器可视区的位置主要使用场景：可以在浏览器页面滚动的时候保存不动

• position: fixed;
  top: 0;
  left: 0;

• 向左和向下同理，向右和向上是数值越大方向相反

• 跟父类没有任何关系

• 跟父元素没有任何关系

• 不随滚动条滚动

• 固定定位不在占有原先的位置

• .w {
      width: 800px;
      height: 1400px;
      background-color: pink;
      margin: 0 auto;
  }
  .fixed {
      position: fixed;
      走到浏览器宽度一半
      left: 50%;
      利用margin走到盒子宽度的一半距离
      margin-left: 400px;
      width: 50px;
      height: 150px;
      background-color: blue;
  }

• 粘性定位是相对定位和固定定位的混合，Sticky粘性

• 粘性定位占有原来的位置（相对定位的特点）

• 语法：

• 选择器{ position: sticky; top: 10px;}

• 必须添加top、left 、right、bottom、其中一个

• 定位的叠次序z-index

• 选择器{z-index: 1;}

• 数值可以是正整数、负整数、或0.默认是auto,数值越大，盒子月靠上

• 如果属性值相同，则按照书写的顺序，后来居上

• 只有定位的盒子才有z-index属性

• 如果想让盒子居中不能用，margin: 0 auto;

• position: absolute;
  left走50%父容器宽度的一半
  left: 50%;
  margin 负值 往左边走 自己盒子宽度的一半
  margin-left: -100px;
  top: 50px;

• 定位的特殊性

• 绝对定位和固定定位也和浮动类似

• 1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度

• 2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是自身内容的大小。

• 浮动的元素、绝对定位(固定定位)元素都不会出发外边距合并的问题