在网页设计中，右上角头像已经成为了一个重要的元素。在用 HTML 构建静态网页时，显示一个头像通常是使用 img 标签来完成，而在 CSS 中，可以使用一些技巧来定位、优化这个头像的显示。

/* CSS 中通过 background-image 来引入头像图片 */
.profile {
width: 50px;
height: 50px;
background-image: url('avatar.png');
background-size: cover;
border-radius: 50%;
position: absolute;
top: 20px;
right: 20px;
}

从上面的代码可以看出，我们定义了一个 .profile 的样式，其中 width 和 height 表示这个头像元素的宽度和高度，background-image 则是引入了图片文件。这里我们还使用了 background-size 属性来让图片不变形地填满整个元素，使用了 border-radius 来将其变为圆形。

为了将这个头像元素放置到右上角，我们还需要使用绝对定位。即 position 属性设置为 absolute，并指定 top 和 right 属性为 20px。这样，我们就可以将头像放在页面的右上角。

除了上述方式，我们还可以使用 SVG 图标来代替头像图片，并在 CSS 中定义其样式。这样可以避免网络请求所带来的加载时间，从而提高页面的渲染速度。