当前位置：首页 > 前端开发 > 正文

如何在html中固定图片

admin
前端开发
2025-08-09
6

HTML中固定图片，可以使用CSS设置图片的 position属性为 fixed或 absolute。，“ html，，“，

HTML中固定图片,通常是指让图片在页面滚动时保持在某个特定的位置，比如固定在页面的顶部、底部或某个侧边，这种效果可以通过CSS的position属性来实现，特别是使用position: fixed;或position: sticky;，下面将详细介绍如何在HTML中固定图片，包括不同的方法和注意事项。

使用`position: fixed;`固定图片

position: fixed;可以将元素固定在浏览器窗口的某个位置，无论页面如何滚动，该元素都会保持在指定的位置，以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Fixed Image Example</title>
    <style>
        .fixed-image {
            position: fixed;
            top: 10px; / 距离顶部10像素 /
            right: 10px; / 距离右侧10像素 /
            width: 150px; / 图片宽度 /
        }
    </style>
</head>
<body>
    <img src="your-image.jpg" alt="Fixed Image" class="fixed-image">
    <div style="height: 2000px;">
        <!-模拟长内容 -->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vel sapien ultrices, sit amet gravida libero tristique. Integer nec magna euismod, ultricies purus eget, commodo urna. Suspendisse potenti. In hac habitasse platea dictumst. Phasellus vitae iaculis euismod, id gravida justo imperdiet.
    </div>
</body>
</html>

在这个例子中,图片被固定在浏览器窗口的右上角，距离顶部和右侧各10像素，即使页面内容很长，图片也会始终保持在这个位置。

使用`position: sticky;`固定图片

position: sticky;是CSS中的一种定位方式，它结合了relative和fixed的特性，当元素在视口中时，它表现得像relative，但一旦滚动到指定的阈值，它就会像fixed一样固定在指定的位置，以下是一个示例：

如何在html中固定图片第1张

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Sticky Image Example</title>
    <style>
        .sticky-image {
            position: -webkit-sticky; / 兼容Safari /
            position: sticky;
            top: 0; / 当滚动到顶部时固定 /
            width: 150px; / 图片宽度 /
        }
    </style>
</head>
<body>
    <img src="your-image.jpg" alt="Sticky Image" class="sticky-image">
    <div style="height: 2000px;">
        <!-模拟长内容 -->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vel sapien ultrices, sit amet gravida libero tristique. Integer nec magna euismod, ultricies purus eget, commodo urna. Suspendisse potenti. In hac habitasse platea dictumst. Phasellus vitae iaculis euismod, id gravida justo imperdiet.
    </div>
</body>
</html>

在这个例子中,图片在页面滚动到顶部时会固定在顶部，当页面滚动超过图片时，图片会像fixed一样保持在顶部。

使用表格布局固定图片

虽然现代Web开发中不推荐使用表格布局,但在某些情况下，表格仍然可以用来实现固定图片的效果，以下是一个使用表格固定图片的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Table Fixed Image Example</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            padding: 0;
        }
        .fixed-image {
            width: 150px; / 图片宽度 /
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td style="width: 150px;"><img src="your-image.jpg" alt="Fixed Image" class="fixed-image"></td>
            <td style="vertical-align: top;">
                <div style="height: 2000px;">
                    <!-模拟长内容 -->
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vel sapien ultrices, sit amet gravida libero tristique. Integer nec magna euismod, ultricies purus eget, commodo urna. Suspendisse potenti. In hac habitasse platea dictumst. Phasellus vitae iaculis euismod, id gravida justo imperdiet.
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

在这个例子中,图片被放置在表格的第一列，并且表格的第二列包含了长内容，由于表格的布局特性，图片会固定在页面的左侧，即使页面滚动，图片也会保持在左侧。