Trong CSS, thuộc tính position đóng vai trò quan trọng trong việc kiểm soát bố cục và vị trí của các phần tử trên trang web. Một trong những giá trị quan trọng của thuộc tính này là relative.

Nhưng relative là gì, và nó hoạt động như thế nào? Bài viết này sẽ giúp bạn hiểu rõ hơn về relative, cách sử dụng, ứng dụng thực tế và so sánh với các giá trị khác trong position.

1.1. Định nghĩa về relative trong CSS

Khi làm việc với CSS, việc kiểm soát vị trí của các phần tử trên trang web là rất quan trọng để đảm bảo bố cục hiển thị chính xác. Thuộc tính position trong CSS giúp chúng ta làm điều đó, với nhiều giá trị khác nhau như static, relative, absolute, fixed, và sticky. Trong số đó, relative là một trong những giá trị thường được sử dụng nhất.

Vậy relative là gì?
Giá trị relative của thuộc tính position trong CSS có nghĩa là phần tử được định vị dựa trên vị trí ban đầu của nó. Điều này có nghĩa là nếu bạn không đặt thêm bất kỳ giá trị nào (top, right, bottom, left), phần tử vẫn giữ nguyên vị trí cũ. Tuy nhiên, khi bạn sử dụng các thuộc tính này, phần tử sẽ dịch chuyển so với vị trí ban đầu của nó, thay vì dịch chuyển so với viewport hoặc một phần tử cha.

Ví dụ:

css

CopyEdit

.box { position: relative; top: 20px; left: 30px; width: 100px; height: 100px; background-color: blue; }

Trong đoạn mã trên:

• .box có position: relative, nghĩa là nó được đặt dựa trên vị trí ban đầu của nó.

• Sau đó, chúng ta dịch chuyển nó 20px xuống dưới (top: 20px;) và 30px sang phải (left: 30px;).

• Điều quan trọng là không gian ban đầu của phần tử vẫn được giữ nguyên, tức là phần tử vẫn chiếm diện tích như cũ trong bố cục, chỉ là nội dung của nó đã bị di chuyển.

1.2. Cách hoạt động của relative trong CSS

Khi sử dụng position: relative, phần tử vẫn nằm trong luồng tài liệu bình thường. Điều này có nghĩa là các phần tử xung quanh nó vẫn xem như phần tử chưa bị dịch chuyển. Đây là điểm khác biệt lớn so với absolute, khi mà một phần tử có position: absolute sẽ bị loại khỏi luồng tài liệu và không ảnh hưởng đến các phần tử xung quanh.

Ví dụ về relative và sự ảnh hưởng đến các phần tử xung quanh

Giả sử chúng ta có ba phần tử div liên tiếp:

html

CopyEdit

<div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div>

css

CopyEdit

.box { width: 100px; height: 100px; margin: 10px; background-color: lightblue; } .relative-box { position: relative; top: 30px; left: 50px; background-color: orange; }

Khi gán position: relative và thêm top: 30px; left: 50px; vào .relative-box, Box 2 sẽ dịch xuống dưới 30px và sang phải 50px, nhưng Box 3 vẫn giữ nguyên vị trí ban đầu, không bị ảnh hưởng bởi sự dịch chuyển của Box 2.

1.3. Khi nào nên sử dụng relative?

Sử dụng relative trong các trường hợp sau sẽ giúp bạn kiểm soát bố cục một cách hiệu quả:

1.3.1. Khi muốn dịch chuyển phần tử mà không phá vỡ bố cục tổng thể

Ví dụ, bạn muốn một tiêu đề nhô cao hơn một chút để tạo hiệu ứng:

css

CopyEdit

h1 { position: relative; top: -10px; }

Dòng tiêu đề sẽ dịch lên trên 10px, nhưng không làm ảnh hưởng đến các phần tử khác.

1.3.2. Khi làm nền tảng cho absolute

Nếu một phần tử cha có position: relative, tất cả phần tử con có position: absolute bên trong nó sẽ định vị dựa trên phần tử cha đó, thay vì toàn bộ trang.

Ví dụ:

css

CopyEdit

.container { position: relative; width: 300px; height: 300px; background-color: lightgray; } .child { position: absolute; top: 20px; left: 20px; width: 50px; height: 50px; background-color: red; }

Ở đây, .child sẽ định vị dựa trên .container, chứ không phải toàn bộ trang web.

2.1. Tạo hiệu ứng động với relative

Một ứng dụng phổ biến của relative là tạo hiệu ứng hover hoặc hiển thị tooltip.

Ví dụ:

css

CopyEdit

.tooltip-container { position: relative; display: inline-block; } .tooltip { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background-color: black; color: white; padding: 5px; border-radius: 5px; visibility: hidden; } .tooltip-container:hover .tooltip { visibility: visible; }

Khi di chuột vào phần tử .tooltip-container, tooltip sẽ hiện lên phía trên nhờ position: absolute; nhưng vẫn được định vị chính xác vì .tooltip-container có position: relative;.

2.2. Căn chỉnh hình ảnh và nội dung trong thiết kế web

Trong giao diện web hiện đại, relative thường được dùng để điều chỉnh vị trí hình ảnh và văn bản mà không làm xáo trộn bố cục.

Ví dụ:

css

CopyEdit

.image-container { position: relative; width: 300px; } .image-container img { width: 100%; } .image-container .caption { position: absolute; bottom: 10px; left: 10px; background: rgba(0, 0, 0, 0.5); color: white; padding: 5px; }

Ở đây:

• position: relative; giúp .image-container làm gốc tham chiếu.

• .caption dùng position: absolute; để hiển thị chú thích trên ảnh.

2.3. Cách kết hợp relative với Flexbox và Grid

Bạn có thể kết hợp relative với Flexbox hoặc CSS Grid để làm bố cục linh hoạt.

Ví dụ, khi cần tạo menu dropdown:

css

CopyEdit

.menu { position: relative; } .dropdown { position: absolute; top: 100%; left: 0; background-color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: none; } .menu:hover .dropdown { display: block; }

Nhờ relative, menu thả xuống xuất hiện ngay dưới menu chính.

position: relative là một thuộc tính quan trọng trong CSS, giúp di chuyển phần tử mà không phá vỡ bố cục. Nó thường được dùng để:

• Dịch chuyển nhẹ một phần tử mà vẫn giữ nguyên không gian cũ.

• Làm gốc tham chiếu cho absolute.

• Tạo hiệu ứng hover, tooltip, hoặc dropdown.

Hiểu rõ về relative giúp bạn kiểm soát vị trí phần tử linh hoạt hơn, hỗ trợ thiết kế web chuyên nghiệp và đẹp mắt hơn.

Để hiểu rõ hơn về relative, hãy so sánh nó với các giá trị khác trong position.

3.1. relative vs absolute

• relative: Dịch chuyển dựa trên vị trí ban đầu.

• absolute: Dịch chuyển dựa trên phần tử cha có position: relative hoặc absolute.

Ví dụ:

css

CopyEdit

.parent { position: relative; width: 300px; height: 300px; } .child { position: absolute; top: 20px; left: 20px; }

Ở đây, .child sẽ được đặt dựa trên .parent, không bị ảnh hưởng bởi vị trí ban đầu của nó.

3.2. relative vs fixed

• relative: Dịch chuyển theo vị trí ban đầu của phần tử.

• fixed: Giữ nguyên vị trí khi cuộn trang.

Ví dụ:

css

CopyEdit

.fixed-box { position: fixed; top: 0; left: 0; width: 100%; background-color: black; color: white; }

Phần tử này sẽ luôn ở đầu trang ngay cả khi cuộn xuống.

3.3. relative vs sticky

• relative: Dịch chuyển tĩnh dựa trên vị trí ban đầu.

• sticky: Kết hợp giữa relative và fixed, giữ nguyên vị trí khi cuộn trang đến một ngưỡng nhất định.

Ví dụ:

css

CopyEdit

.sticky-header { position: sticky; top: 0; background-color: blue; }

Phần tử này sẽ giữ nguyên vị trí trên cùng khi cuộn trang.