详解CSS 子元素相对于父元素固定定位解决方案

1. 子元素相对于父元素固定定位的问题

在进行 CSS 布局时，经常会遇到子元素需要相对于父元素进行固定定位的情况。然而，CSS 没有提供一种完美的解决方案来实现这一点，这就需要我们进行一些技巧性的处理。

通常情况下，使用 position: absolute 来将子元素固定在父元素内部，但是这种做法会使子元素脱离文档流，父元素的高度无法被自动计算，导致布局出现问题。

2. flex 布局实现子元素相对于父元素固定定位

Flex 布局在 CSS3 中引入，其优势在于能够帮助我们更加轻松地实现水平和垂直居中。但是，在父元素中使用 Flex 布局时，子元素的 position: fixed 或者 position: absolute 将无法使用。

不过，我们可以使用 inline-flex 使其适应位置算法。具体实现步骤如下：

2.1 将父元素设置为 inline-flex

.parent {
  display: inline-flex;
  /* to ensure taking space for the fixed element */
  min-height: 0;
}

这里将父元素设为 inline-flex，其内部元素表现为 inline 元素，这样子元素就可以相对于父元素来进行定位。

2.2 子元素设置 position: fixed 或者 position: absolute

.child {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

接下来，我们就可以设置子元素的 position：fixed 或者 position: absolute 来完成其相对于父元素的固定定位。

需要注意的是，当子元素设置了 position: fixed 后，其他的 Flex 子元素的布局可能会产生影响，为此，可以考虑将 fixed 元素放在一个不含 Flex 布局的不定宽容器内，从而避免影响其他元素的布局。

3. 最后的总结

以上介绍了使用 inline-flex 以实现子元素相对于父元素固定定位的方法。虽然这种方法可能会产生一些副作用，但是它可以解决许多其他常见的定位问题。

需要注意的是，此方法并不是完美的解决方案，因此在实际使用中，还需要综合考虑元素的具体情况，从而选择最为适合的实现方法。