HTML CSS 始终置顶

在本文中，我们将介绍如何使用HTML和CSS实现始终置顶效果。始终置顶指的是在网页滚动时，某个元素始终保持在页面的顶部位置，不随页面滚动而移动。这种效果在创建固定导航栏、悬浮广告或通知栏等场景中非常有用。

阅读更多：HTML 教程

使用CSS的position属性

要实现始终置顶效果，我们可以使用CSS的position属性。position属性定义了元素的定位方式，常见的取值有：static、relative、absolute和fixed。

当我们将元素的position属性设置为fixed时，该元素相对于视窗固定定位。不论页面如何滚动，该元素都会固定在视窗的某个位置。下面的代码演示了如何使用CSS的position属性实现始终置顶效果：

<!DOCTYPE html>
<html>
<head>
    <style>
    #header {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #f1f1f1;
        padding: 20px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }
    </style>
</head>
<body>

<div id="header">
    这是一个始终置顶的标题栏
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed nibh facilisis, non dignissim velit auctor. Sed sit amet gravida nisl, at facilisis turpis. Fusce vestibulum ullamcorper lacus, quis tincidunt eros dapibus et. Vestibulum consectetur scelerisque dictum. Nam ac ligula purus. Vestibulum leo orci, rhoncus vitae fermentum at, aliquet in sapien.</p>

</body>
</html>

在上面的例子中，我们创建了一个id为header的<div>元素，并将其position属性设置为fixed，表示该元素始终保持在页面的顶部位置。我们还使用top将其距离页面顶部的偏移量设置为0，使其紧贴页面顶部。通过设置合适的宽度、背景颜色和样式，我们可以自定义始终置顶元素的外观。

这样，当页面滚动时，始终置顶元素<div>将一直显示在顶部位置，不会随页面滚动而移动。

CSS z-index属性

在某些情况下，页面中可能有多个元素需要始终置顶，这时我们可以使用CSS的z-index属性来控制元素的堆叠顺序。z-index属性指定了元素的堆叠层级，数值越大，元素就越靠近用户。

当多个元素都设置为position: fixed;时，默认按照它们在HTML中的顺序堆叠。但是，我们可以通过设置z-index属性来改变它们的堆叠顺序，从而控制显示在页面上的先后顺序。

下面的示例代码展示了如何使用z-index属性实现多个始终置顶元素的堆叠效果：

<!DOCTYPE html>
<html>
<head>
    <style>
    #header1 {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #f1f1f1;
        padding: 20px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        z-index: 2;
    }

    #header2 {
        position: fixed;
        top: 50px;
        width: 100%;
        background-color: #f1f1f1;
        padding: 20px;
        text-align: center;
        font-size: 20px;
        z-index: 1;
    }
    </style>
</head>
<body>

<div id="header1">
    这是置顶元素1
</div>

<div id="header2">
    这是置顶元素2
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed nibh facilisis, non dignissim velit auctor. Sed sit amet gravida nisl, at facilisis turpis. Fusce vestibulum ullamcorper lacus, quis tincidunt eros dapibus et. Vestibulum consectetur scelerisque dictum. Nam ac ligula purus. Vestibulum leo orci, rhoncus vitae fermentum at, aliquet in sapien.</p>

</body>
</html>

在上面的例子中，我们创建了两个始终置顶的<div>元素：header1和header2。它们都具有相同的position属性值fixed，但是我们通过设置不同的z-index属性值控制它们的堆叠顺序。header1的z-index属性值为2，而header2的z-index值为1。这样，header1就会显示在header2的上方。