子绝父相

147 阅读1分钟

子绝父相

在绝大数情况下,子元素的绝对定位都是相对于父元素进行定位。如果希望子元素相对于父元素进行定位,又不希望父元素脱标,常用解决方案是:

  • 父元素设置position: relative(让父元素成为定位元素,而且父元素不脱离标准流)
  • 子元素设置position: absolute
  • 简称为“子绝父相”

绝对定位元素:position值为absolute或者fixed的元素

对于绝对定位元素来说:

  • 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
  • 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度

如果希望绝对定位元素的宽高和定位参照对象一样,可以给绝对定位元素设置以下属性:left: 0、right: 0、top: 0、bottom: 0、margin:0

如果希望绝对定位元素在定位参照对象中居中显示,可以给绝对定位元素设置以下属性:left: 0、right: 0、top: 0、bottom: 0、margin: auto。另外,还得设置具体的宽高值(宽高小于定位参照对象的宽高)。

粘性定位 - sticky

另外还有一个定位的值是position: sticky,比起其他定位值要新一些。sticky可以看做是相对定位和固定定位的结合体。它允许被定位的元素表现得像相对定位一样,直到它滚动到某个阈值点。当达到这个阈值点时, 就会变成固定定位。sticky是相对于最近的滚动祖先包含视口的。