Có một thực tế rằng Absolute Position tuy rất hay và mạnh nhưng lại chưa được sử dụng đúng với “thực lực” của nó. Đa phần người ta thường sử dụng Float và dùng Padding hoặc Margin để căn chỉnh các thành phần trong giao diện với nhau. Nhưng như bạn cũng đã biết, giao diện với Float rất mong manh. Chỉ cần sai chút xíu là cả giao diện có thể bị vỡ.

Đó là chưa kể đến những bất cập của Float như phải clear float và đôi khi nó thực sự rất khó quản lý. Nhưng không hiểu vì lý do tại sao Float được sử dụng rất rộng rãi và vượt ra ngoài dự định ban đầu của những người phát triển CSS. Đầu tiên Float chỉ được thiết kế để đưa hình ảnh vào những vị trí thích hợp. Nhưng dần dà nó được sử dụng khá phổ biến trong thiết kế giao diện.

Nói vậy không phải là tôi không thích Float hoặc sử dụng Float là không tốt, mà sự thực thì tôi cũng sử dụng Float khá nhiều trong thiết kế giao diện. Nhưng nếu dùng nó kết hợp với Absolute Position trong CSS thì giúp giao diện của bạn có thể tương thích với nhiều trình duyệt mà không cần phải áp dụng hack cho IE.

Trong bài này chúng ta sẽ tìm hiểu sơ qua về Absolute Position trong Relative Position. Tôi đã có một video về Contextual Positioning nói rất rõ về mối liên hệ giữa Relative Position và Absolute Position. Nhưng vì đây là khái niệm hết sức quan trọng do vậy trong bài này tôi cũng nói lại một chút.

Ở ví dụ dưới đây tôi sử dùng Absolute Position để định vị 3 thẻ div nằm trong thẻ div lớn là #wrapper.

<div id="wrapper">
    <div id="left"> </div>
    <div id="middle"> </div>
    <div id="right"> </div>
</div>

Với Absolute Position bạn có thể sử dụng các giá trị: px, em và % và với các vị trí: top, right, bottom và left. Tuy nhiên trong thực tế bạn chỉ cần 2 giá trị là top và left (hoặc right) thì cũng đủ để định vị một thành phần rồi.

Mẹo nhỏ: Nếu trong quá trình định vị tọa độ với Absolute bạn phải làm đi làm lại nhiều lần. Thì nay bạn có thể sử dụng addon Firebug để định vị chính xác đến từng Pixel. Tôi có làm một video hướng dẫn cách sử dụng Firebug.

Ở ví dụ trên thẻ div#wrapper có position: relative, nó sẽ đóng vai trò làm thành phần bao quanh cho 3 thẻ div có position: absolute nằm bên trong nó. Nếu ta bỏ giá trị position: relative ở thẻ div#wrapper đi thì 3 thẻ div ở trong sẽ như “hươu lạc mẹ” và chạy toán loạn hết. Uhm! thực ra cũng không toán loạn mà nó sẽ nhận body làm mẹ nuôi và định vị theo “bà mẹ” mới này.

Chính vì thế điều quan trọng nhất trong khi sử dụng Absolute Position là xác định thành phần bao quanh và đặt position của nó thành relative.