• fans
  • 1036 reader
  • followers

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.

Absolute Position

Ở ví dụ trên thẻ div#wrapperposition: 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.

Absolute Position

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

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • http://thaidt.net/ Thành Thái

    CÁi đó là border-radius bạn nhé :)

    border-radius:5px;

  • Thanh Phúc

    Bạn có thể cho mình hỏi nếu thành phần đặt là relative đó không phải là 1 hình hay là 1 khối hộp đứng yên mà là 1 slide thì có thể dùng absolute position trong trường hợp này được không?Mong bạn giúp đỡ.

  • ChicongCM

    rất là chi tiết và dễ hiểu, rất cảm ơn ^^

  • bình

    nếu dùng thuộc tính left top right bottom thì sẽ bị lệch khi dùng ở độ phân giải khác nhau. làm sao để fix nó

  • cayvagioo

    Nói chung là hay va diễn đạt rất chi là rễ hiểu.

  • http://mamloving.com congnguyen

    Làm sao mình có thể cắt HTML chạy tốt trên mọi browser, và 1 lỗi của người mới bắt đầu hay gặp là khi phóng to thu nhỏ browser thì menu hay logo nhảy lung tung. Thanks.

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives