css怎么固定在底部显示

在CSS中，可以使用position: fixed;属性将元素固定在底部显示。

在网页设计中，我们经常需要将元素固定在页面的某个位置，比如底部，CSS提供了一些属性和方法来实现这个功能，本文将详细介绍如何使用CSS将元素固定在底部显示。

望城网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联公司2013年至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。

1. 使用position属性

我们需要了解CSS中的position属性，position属性有四个值：static、relative、absolute和fixed，fixed值可以使元素相对于浏览器窗口进行定位，即使页面滚动，元素也会停留在同一位置。

如果我们想要一个div元素固定在页面底部，我们可以这样设置：

div {
    position: fixed;
    bottom: 0;
    width: 100%;
}

在这个例子中，bottom: 0;表示元素距离底部的距离为0，width: 100%;表示元素的宽度为其父元素的100%。

2. 使用flex布局

除了使用position属性，我们还可以使用flex布局来实现元素固定在底部，flex布局是CSS3引入的一种新的布局模式，它可以轻松地实现元素的对齐和排序。

如果我们想要一个容器中的元素按照从上到下的顺序排列，并且最下面的元素始终在底部，我们可以这样设置：

.container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

在这个例子中，display: flex;表示容器使用flex布局，flex-direction: column;表示元素按照垂直方向排列，align-items: flex-end;表示元素向底部对齐。

3. 使用sticky定位

CSS3还引入了一个新的定位模式——sticky定位，当一个元素的scrollTop值超过一定阈值时，该元素会被“粘”到它的最近的具有滚动框的祖先元素上，这对于实现元素在页面滚动到一定位置后固定在顶部或底部非常有用。

如果我们想要一个div元素在页面滚动到一定位置后固定在底部，我们可以这样设置：

div {
    position: sticky;
    bottom: 0;
}

在这个例子中，bottom: 0;表示元素距离底部的距离为0，当页面滚动时，如果div元素的scrollTop值超过0，那么它就会被“粘”到底部。

4. 注意事项

在使用上述方法时，我们需要注意以下几点：

如果父元素没有设置高度或者高度为auto，那么fixed和sticky定位可能不会生效，我们需要确保父元素的高度是确定的。

如果多个元素使用了fixed或sticky定位，那么它们会按照它们在文档流中出现的顺序进行堆叠，也就是说，后出现的元素会覆盖先出现的元素。

sticky定位的阈值是可以自定义的，我们可以通过top、right、bottom和left属性来设置阈值。top: 50px;表示当元素的scrollTop值超过50px时，它会被“粘”到顶部。