Cách định vị văn bản góc trên bên phải hình ảnh với CSS

Định vị text lên trên hình ảnh (Top Right)

Kỹ thuật: **Container `position: relative`** + **Text `position: absolute`** với `top` và `right`. Hình ảnh `width: 100%` để responsive.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      position: relative;           /* 1. Gốc tọa độ cho con absolute */
      display: inline-block;        /* Bao vừa ảnh */
    }
    img {
      width: 100%;
      height: auto;
      opacity: 0.6;                 /* Làm mờ ảnh cho text dễ đọc */
      display: block;               /* Loại bỏ gap dưới ảnh */
    }
    .direction {
      position: absolute;           /* 2. Tách khỏi flow */
      top: 10px;                    /* Cách trên 10px */
      right: 19px;                  /* Cách phải 19px */
      font-size: 13px;
      color: white;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Đọc dễ hơn */
    }
  </style>
</head>
<body>
  <h1>Heading One</h1>
  <p>Hình ảnh dưới có text ở góc trên bên phải:</p>
  <div class="box">
    <img src="python_data_science.jpg" alt="Tutorial" width="800" height="400">
    <div class="direction">Top Right Corner</div>
  </div>
</body>
</html>

Các vị trí góc phổ biến

Responsive Text trên ảnh

.image-text {
  position: absolute;
  top: 5%;
  right: 5%;
  font-size: clamp(12px, 3vw, 24px);  /* Responsive font size */
  padding: 8px 12px;
  background: rgba(0,0,0,0.6);
  border-radius: 4px;
  color: white;
}
@media (max-width: 480px) {
  .image-text { font-size: 12px; padding: 4px 8px; }
}

Lưu ý quan trọng

• Container `.box` **phải** có `position: relative` (hoặc `absolute`/`fixed`).
• `img` nên có `display: block` để tránh khoảng trắng do baseline.
• Dùng `opacity` hoặc `background: rgba()` trên overlay để text dễ đọc.
• Accessibility: Thêm `alt` cho img, text overlay nên có contrast ratio ≥ 4.5:1.