CSS中的三大定位

• 在CSS中可以通过position属性定义元素的定位类型：
  • static：不定位，元素遵循HTML默认的流动模型，这是默认值。
  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位

一、static

二、Position:relative

代码

.item1{
    width: 100px;
    height: 100px;
    position: relative;
    top:30px;
    left: 30px;
    background: yellow;
}

图示

• 能够让元素偏离它在标准流中的位置。正常情况下，item2应该出现在红色框所示的区域（就是默认位置。）
• 它偏离之后，原来的位置还是被占住了，并没有释放出来。
• 它具体偏离多少由：top,right,bottom,left其中的值来决定：
  • Top: 表示它要向下移动。
  • Right:表示它要向左移动。
  • Bottom:表示它要向上移动。
  • Left:表示它要向右移动。

注意：不要设置两个相对的方向的值。（这样只读区了左边的值，右面的值被忽略）

经典用法： 经典应用：作为绝对定位元素的参考元素

三、Position:absolute：绝对定位

• 绝对定准会让元素完全脱离标准文档流。它后面的兄弟元素就当它不存在一样。对比理解float。
• left值的作用与relative 的情况是一致的。但left值的参考点变了。relative是在原来位置的基础上进行偏移;而absolute是在参考元素的基础上进行移动。
• 上面的代码中，绝对定位元素item1的参考元素是body，所以left是相对于body元素的原点（左上角）来设置的。

*position:absolute也具有块级化的能力

• 如果把一个元素设置为绝对定位，则它会悄悄地把这个元素的display改成block（类似于float）.

• 如下的行内元素span是不能设width和height的：

  • 没有绝对定位时，无法显示width和height的值

• 加入绝对定位的时候，span中的width和height的值便被读取显示

当一个元素设置为绝对定位之后，如何确定它的参考元素？

步骤：

• 从当前设置为absolute的元素出发，向上一级元素搜索（先找爸爸，再找爷爷，再找太爷爷…..，直到祖宗：body）。
• 哪一个祖先可以做为它的参考元素呢？满足如下条件之一：
  • 祖先元素的position是relative
  • 祖先元素的position是absolute
  • 祖先元素的position是fixed
  • 祖先元素就是body 找到参考元素之后，则top:0,left:0就相当于是参考元素的左上角。

示例：

子元素绝对定位，父元素相对定位。

• Left
• Right
• Bottom:起点是参考元素的最下边。Bottom:0;表示子元素的下边框与定位元素的下边框重合
• top:起点是参考元素的最上边

四、Z-index

• 用来确定定位元素（position是 relative,absolute,fixed ）的在z轴方向的排列次序。

• 它是一个具体的数值，不要单位！

• z-index大的元素会盖住z-index小的元素。这个值默认是auto

在都没有设置z-index的情况下：按html中的书面顺序，后写的放在最上面。

)

在设置了 z-index的情况下，z-index大的在前

五、fixed：固定定位

• 与绝对定位类似，但比绝对定位要简单：不需要去确定参考元素。所有固定定位的元素的参考元素都是整个页面。

固定在侧边的导航效果

注意

        top: 50%;
    transform: translateX(-50%);//使导航框垂直居中。