CSS-定位

1. 相对定位：相对自己以前在标准流中的位置来移动

position:relative;

在相对定位当中，同方向的属性只能使用一个top/bottom right/left

相对定位不脱离标准流，所以会继续占用一份空间，并且区分行内元素，块级元素，行内块级元素，相对定位的元素会占用标准流流中的位置，所以设置margin padding 属性时会影响标准流的布局。

2. 绝对定位

性对于body或者某个定位流中的祖先元素来定位

position:absolute;

绝对定位脱离标准流，不会占用标准流中的位置，不区分块级元素，行内元素，行内块级等

如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点

绝对定位的元素会忽略祖先元素的padding

绝对定位参考点:

• 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
• 如果一个绝对定位的元素有祖先元素, 并且祖先元素中有一个是定位流中的元素, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点,有多个是定位流中的元素, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

• 注意当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中
• 如果想让过一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px;

3.子绝父相

• 相对定位和绝对定位一般都是用来做覆盖效果的, 当看到某个元素覆盖在另外一个元素上时, 第一时间就要想到定位流

绝对定位相对于相对定位的父元素进行定位，只要父元素的宽度不变，定位元素永远不变

z-index属性

• 什么是z-index值?

  • 用于指定定位的元素的覆盖关系

• 定位元素的覆盖关系:

  • 默认情况下定位的元素一定会盖住没有定位的元素
  • 默认情况下写在后面的定位元素会盖住前面的定位元素
  • 默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index值, 那么谁比较大谁就显示在前面
  • 定位元素的从父现象
    • 父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁
    • 父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁