CSS ‘position: absolute; bottom: 0’ 在父元素的定位为 relative 时不起作用

在本文中，我们将介绍当父元素的定位属性为 relative 时，CSS 中的 position: absolute; bottom: 0; 不起作用的原因，并提供相应的解决方案。

阅读更多：CSS 教程

position 属性的概述

在 CSS 中，position 属性用于指定元素在文档中的定位方式。常用的取值有 static、relative、absolute 和 fixed。其中，position: absolute; 会将元素脱离文档流，并相对于最近的已定位祖先元素进行定位。

relative 定位和 absolute 定位的关系

当父元素的定位属性为 relative 时，会创建一个新的定位上下文（positioned context）。这意味着，父元素的子元素设置绝对定位时，参考的位置将是相对于父元素而非文档。

然而，当子元素的 bottom 属性设为 0 时，它并不会贴紧父元素的底部，而是处于一个默认的位置。

问题分析

这个问题的原因在于，bottom 属性是相对于祖先元素的高度计算的，而不是相对于父元素边框的位置。当父元素的定位为 relative 时，它创建了一个新的定位上下文，此时父元素的高度仍为 auto。因此，子元素的 bottom 属性找不到合适的高度参考值，导致无法正确计算。

解决方案

为了解决这个问题，我们可以通过以下几种方法来实现子元素以底部对齐父元素的布局效果。

方法一：使用负 margin

可以给父元素添加一个内部容器，并为该容器设置 position: relative; 和 height 属性。然后，将子元素的 position 设置为 absolute，再使用 top: 100%; margin-top: -100%; 的组合，即可实现子元素以底部对齐父元素的效果。

.parent {
  position: relative;
}
.parent .inner-container {
  position: relative;
  height: 100%;
}
.child {
  position: absolute;
  bottom: 0;
  top: 100%;
  margin-top: -100%;
}

方法二：使用 flexbox 布局

在父元素上应用 display: flex; flex-direction: column; 来创建一个纵向排列的容器，然后将子元素的 margin-top 设置为 auto，即可使子元素自动向顶部偏移至底部对齐父元素。

.parent {
  position: relative;
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

方法三：使用 grid 布局

使用 CSS Grid 布局时，父元素可以使用 grid-template-rows: auto 1fr; 来设置两行，并让第二行的高度自适应。将子元素的 grid-row 属性设置为 span 1，即可实现子元素底部对齐的效果。

.parent {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
}
.child {
  grid-row: span 1;
}

以上三种方法都能够实现子元素以底部对齐父元素的布局效果，根据具体的布局情况，选择合适的方法即可。

总结

在本文中，我们介绍了当父元素的定位为 relative 时，CSS 中的 position: absolute; bottom: 0; 不起作用的原因，并提供了三种解决方案来实现子元素以底部对齐父元素的效果。通过使用负 margin、flexbox 布局或 grid 布局，我们可以规避 CSS ‘position: absolute; bottom: 0’ 在父元素的定位为 relative 时无法正常工作的问题。希望本文对解决相关布局问题有所帮助。