Absolute Position trong thiết kế giao diện

• November 16, 2009
• 70 comments

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">&nbsp;</div>

        <div id="middle">&nbsp;</div>

        <div id="right">&nbsp;</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

Nghe cũng hay mà bạn có ví dụ trong thực tế không?

Tôi biết là bạn sẽ hỏi do vậy tôi đã chuẩn bị trước một giao diện được sử dụng Absolute Position cho bạn tham khảo. Bạn sẽ dễ dàng nhận thấy ở giao diện này có một tấm hình lớn choán hết phần Header và nó nằm “chông chênh” ở giữa. Đây là ví dụ hoàn hảo về sử dụng Absolute Position để định vị các thành phần.

Ngoài ra các thành phần còn lại như thanh di chuyển ở trên và dưới, logo và phần Featured đều được sử dụng Absolute Position. Tôi đã thử trong IE 6, 7 và 8 và hầu như không phải hack bất cứ phần nào ngoại trừ phần PNG hack cho IE 6. Nếu giao diện này làm bằng Float thì sẽ ít nhất là cũng phải hack cái Double Margin của IE.

Bạn có thể download ví dụ này về để xem phần code HTML và CSS