使用 CSS 的 float 属性 (最简单)
这是最传统、最简单的方法，适用于不需要精确控制图片位置（比如不希望它覆盖其他内容）的场景。
（图片来源网络，侵删）
核心思路： 让图片脱离正常的文档流,并向右浮动。
HTML 代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">Float 方法示例</title>
<style>
/* 图片向右浮动 */
.top-right-image {
float: right;
/* 为了让图片离顶部有一定距离，可以加上 margin-top */
margin-top: 20px;
/* 为了让图片离右侧有一定距离，可以加上 margin-right */
margin-right: 20px;
}
</style>
</head>
<body>
<h1>我的网页标题</h1>
<p>这里是一些网页的主要内容，主要内容会围绕着浮动图片排列。</p>
<p>这是另一段文本。</p>
<!-- 这张图片会出现在右上角 -->
<img src="https://via.placeholder.com/150" alt="右上角的图片" class="top-right-image">
</body>
</html>
优点：
- 代码非常简单,易于理解。
缺点：
（图片来源网络，侵删）
float属性会脱离文档流，可能会影响后面元素的布局，需要清除浮动（clear: both）。- 对于需要绝对定位（覆盖在其他内容之上）的场景不适用。
使用 CSS 的 position 属性 (最常用、最灵活)
这是最推荐的方法，它提供了精确的控制能力,你可以决定图片是否覆盖在其他内容之上。
position 属性有几个关键值：static, relative, absolute, fixed, sticky，对于右上角定位，我们通常使用 absolute 或 fixed。
方案 A：position: absolute (相对于最近的“定位”父元素)
核心思路： 将图片设置为绝对定位，然后通过 top 和 right 属性来指定它距离父元素顶部和右侧的距离。
HTML 代码：
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">Position Absolute 方法示例</title>
<style>
body {
/* 给父元素设置 position: relative，这样 absolute 就相对于 body 定位了 */
position: relative;
/* 给 body 加上一些内边距，避免图片紧贴边缘 */
padding: 20px;
}
.top-right-image {
position: absolute;
top: 20px; /* 距离顶部 20px */
right: 20px; /* 距离右侧 20px */
}
</style>
</head>
<body>
<h1>我的网页标题</h1>
<p>主要内容区域，图片会绝对定位在这个区域的右上角。</p>
<!-- 这张图片会出现在右上角 -->
<img src="https://via.placeholder.com/150" alt="右上角的图片" class="top-right-image">
</body>
</html>
关键点：
- 父元素需要
position: relative：这是最关键的一步，绝对定位的元素是相对于它最近的设置了position(且不为static) 的祖先元素进行定位的。body没有设置position: relative，图片就会相对于整个视口（浏览器窗口）定位。 - 优点：定位非常精确,不会影响其他元素的布局。
- 缺点：元素脱离了正常的文档流,其他元素会忽略它的存在。
方案 B：position: fixed (相对于视口)
核心思路： 将图片固定在浏览器窗口的右上角，即使你滚动页面,图片也会一直停留在那里。
HTML 代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">Position Fixed 方法示例</title>
<style>
.top-right-image {
position: fixed; /* 相对于视口（浏览器窗口）固定定位 */
top: 20px;
right: 20px;
/* 可以加一个 z-index 确保它在内容之上 */
z-index: 1000;
}
/* 为了演示滚动效果，我们给 body 加高一点 */
body {
height: 2000px;
padding: 20px;
}
</style>
</head>
<body>
<h1>我的网页标题</h1>
<p>向下滚动页面，你会发现这个图片会一直停留在右上角。</p>
<!-- ... 更多内容 ... -->
<!-- 这张图片会固定在浏览器窗口的右上角 -->
<img src="https://via.placeholder.com/150" alt="固定在右上角的图片" class="top-right-image">
</body>
</html>
关键点：
- 相对于视口：
fixed的定位参考点是浏览器窗口,而不是页面上的任何元素。 - 滚动时位置不变：这是
fixed和absolute最大的区别。 - 适用场景：网站导航栏、返回顶部按钮、悬浮广告等。
使用 Flexbox 布局 (现代、推荐)
如果你是在布局一个完整的容器（比如页头 header），Flexbox 是非常优雅和强大的解决方案。
核心思路： 将父容器设置为 Flexbox 布局，并让内容“推”图片到右边。
HTML 代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">Flexbox 方法示例</title>
<style>
.header {
/* 1. 设置为 Flex 容器 */
display: flex;
/* 2. 让子元素（图片和文字）两端对齐 */
justify-content: space-between;
align-items: center; /* 垂直居中 */
padding: 20px;
border-bottom: 1px solid #ccc;
}
.logo-text {
font-size: 24px;
font-weight: bold;
}
.user-avatar {
/* 图片可以设置宽高 */
width: 50px;
height: 50px;
border-radius: 50%; /* 变成圆形 */
}
</style>
</head>
<body>
<div class="header">
<div class="logo-text">我的网站</div>
<!-- 图片会自动被推到右边 -->
<img src="https://via.placeholder.com/50" alt="用户头像" class="user-avatar">
</div>
<div class="content">
<p>这里是网页的主要内容。</p>
</div>
</body>
</html>
关键点：
- 父元素设置
display: flex：这是启用 Flexbox 的前提。 justify-content: space-between：这个属性会让子元素之间最大限度地分散开，第一个元素在左,最后一个元素在右。- 优点：代码语义化好，布局灵活,非常适合对齐和分布子元素。
- 缺点：主要用于容器内部的布局，不像
fixed那样可以相对于视口固定。
总结与如何选择
| 方法 | 核心属性 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|
| Float | float: right |
最简单 | 脱离文档流，可能影响布局 | 简单的文本环绕图片 |
| Absolute | position: absolute |
定位精确，不影响其他元素 | 脱离文档流，父元素需设置 position: relative |
在某个特定容器内精确定位元素 |
| Fixed | position: fixed |
相对于视口固定，滚动不动 | 脱离文档流 | 悬浮导航、返回顶部按钮、广告 |
| Flexbox | display: flex |
现代、灵活、语义化好 | 主要用于容器内部布局 | 对齐和分布容器内的子元素（如页头、页脚） |
给你的建议：
- 想让图片覆盖在页面上某个区域的右上角？ -> 使用
position: absolute。 - 想让图片固定在浏览器窗口的右上角，滚动页面也不动？ -> 使用
position: fixed。 - 想在页头或页脚里，把标题放左边，用户头像放右边？ -> 使用 Flexbox,这是最完美的解决方案。
