CSS之定位

timg.jpg

静态定位 (默认的定位)

• position:static
• 所有的标准流都是这个定位，这个属性一般情况下是不会单独使用，一般情况下是通过js来动态给元素清除定位

相对定位

• position:relative
• 如果设置相对定位但没有设置值，盒子的位置是不会改变的
• 相对定位是占据标准流的位置,是相对于自己原来的位置发生了偏移
• 方位词:top、right、bottom、left
• 比如：下面的图所示，相对于原来的位置，top、left，就是相当于以top为x轴,以left为y轴，在这个平面坐标系上平移

相对定位.JPG

绝对定位

• position:absolute

• 可以将一个盒子移动到页面的任意一个位置

  • top:设置元素与浏览器顶部的距离
  • left：设置元素与浏览器左边的距离
  • right：设置元素与浏览器右边的距离
  • bottom：设置元素与浏览器底边的距离。

• 注意：

  • 如果盒子没有没有父元素，那么将来在定位的时候，我们top 、left 、right 、bottom 是相对于body元素的。
  • 如果定位的盒子有父元素，但是父元素没有定位，那么这个子元素定位的trbl还是相对于body.

• 如果定位的盒子有父元素，并且父元素有定位，那么这个元素的定位是相对于它的父元素（子元素定位的trbl是相对于父元素。）。

• 父元素如果有定位一般情况下这个定位是相对，绝对（如果是静态没有效果）

• 绝对定位的盒子不占页面上的位置（脱离标准流）

• 如果没有设置top，left那么这个元素就算设置了有position属性位置会在父元素的0，0位置。

• 子绝父相（子元素使用绝对定位，父元素使用相对定位）

固定定位

• 使用盒子显示浏览器的固定位置。
• position:fixed
• 固定定位会脱离标准流
• 固定定位会改变元素的显示方式

z-index 用来设置当前盒子所在的层次,只能在定位中使用