[分享]css中底部靠下定位

CSS中有一种常见的底部靠下定位方式。一般情况下，我们使用:absolute或:relative来定位元素，但这两种定位会使元素脱离文档流，会影响其它元素的位置。所以，我们可以使用定位边界为父元素的:...

CSS中有一种常见的底部靠下定位方式。

一般情况下，我们使用position:absolute或position:relative来定位元素，但这两种定位会使元素脱离文档流，会影响其它元素的位置。

所以，我们可以使用定位边界为父元素的position:fixed实现底部靠下定位。例如：

.parent {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: #333;
}

.child {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
} 

在上述例子中，父元素设置为position:fixed，高度为100px，即为我们希望子元素的高度。子元素设置为position:absolute，底部也设置为0，这样就可以实现底部靠下定位了。

需要注意的是，父元素的高度需要与子元素期望的高度一致，否则会影响布局效果。