Tìm hiểu CSS Position Truớc khi cùng nhau tìm hiểu về thuộc tính này của c ss,tô i xin cảnh báo bạn rằng thật khó có thể diễn tả được tầm quan trọng của thuộc tính Position trong c ss,n ỏ có thể được ví như ( có thể là hơi quá) là vai trò cùa Oxi với cuộc sống của chúng ta vậy. Trong việc thiết kế một trang web việc xác định một vị trí thành phần trên trang là một điều chúng ta thường xuyên phải thực hiện,css ra đời cũng vì mục đích đó mà thôi,Các nhà thiết kế web sẽ ráp HTML và sau đó họ sẽ dùng c s s để định vị trí cho mỗi phần tử HTML. Trước hết các bạn cần biết rằng thuộc tính Position sẽ có bốn giá trị lựa chọn như sau : • static • relative • absolute • fixed Và điều sau đây các bạn cần phải lưu ý là mỗi phần tử HTML luôn bắt buộc phải nhận một giá trị trong 4 giá trị trên. Như vậy thì nếu các bạn vô tình không đặt thuộc tính position cho nó thì sao nhi ? yên tâm đi nếu các bạn không đặt giá trị cho nó thì nó sê tự động nhận giá trị mặc định là static. Sau đây tôi sẽ hướng dẫn cụ thể tác dụng của từng thuộc tính một: 1. Static Với giá trị này các thành phần HTML sẽ được định ở vị trí mặc định,và chú ý là khi đặt giá trị này thì nghĩa là các giá trị top, left,right và bottom sẽ không còn hiệu lực nữa. 2. Relative Khi các bạn đặt giá trị relative cho đổi tượng HTML nghĩa là bạn đang định vị trí tương đối cho nó. Tôi biết có thể một số bạn sẽ chưa hiểu như thế nào là định vị trí tương đối,vậy tôi xin giảng giải thế này,chẳng hạn như một phần tử X đang đứng ở vị trí mặc định là a nào đó trên trang web ( nói là vị trí mặc định bời vì nó đang nhận giá trị position mặc định là static). Và nếu các bạn đặt position cho nó là relative và các giá trị top,left,right và bottom xác định ( ở đây tôi giả sử là đặt top=50px) thế thì vị trí của X sẽ được tính từ vị trí a,nghĩa là coi a là gốc tọa độ ,các giá trị top,left,right và bottom sẽ là tọa độ của X trong hệ tọa độ gốc a đó. Nói đến đây chắc cũng quá đủ để các bạn có thể hiểu đưực vấn đề. 3. Absolute Khi giá trị cùa position là absolute nghĩa là phần tử đang được định vị trí một cách tuyệt đối. Có một điều cần lưu ý đó là khi đã nói đến định vị trí tuyệt đối nghĩa là nó phải có một đối tượng nào đó để đối chiếu vị trí,thật là nực cười khi chúng ta đưa ra câu lệnh : “ cách về bên phải một khoảng là lOOpx” !!!??!!.Rõ ràng lúc đó do không có đối tượng để đối chiếu nên việc dịch chuyển bên phải lOOpx là bất khả thi,ít ra cũng phải nói chẳng hạn như : “ cách về bên phải so với banner một khoảng là 1 OOpx”. Các bạn cần nhớ những dấu tích sau về absolute: ■S Absolute sẽ căn cứ vào một đối tượng nào đó để định vị trí s Top,right,left và bottom sê phát huy tác dụng với absolute s Đối tượng chọn làm đối chiếu sẽ là đối tượng cha gần nhất của nó mà được vài đặt position là một trong 3 giá trị relative, absolute hoặc fixed ( nhớ là chỉ 3 giá trị này thôi nhé). ■S Nếu không tìm được đối tượng cha nào như thế nó sẽ chọn đối tượng đối chiếu là <html> 4. Fixed klii đặt position giá trị fixed, đối tượng HTML sẽ có vị trí cố địnli so với màn hình máy tính của bạn ( nhớ nhẻ so với màn hình máy tính chứ không phải là so với <html> đâu nhé). Nghĩa là khi bạn có kéo thanh trượt đi chăng nữa thì đối tượng vẫn sẽ ờ một vị trí cố định trên màn hình. Tôi sẽ không nói nhiều về Fixed, các bạn hãy thử cài đặt và xem kết quả thế nào sẽ hiểu ngay thôi. Trên đây chúng ta đã tìm hiểu qua về bốn giá trị của thuộc tính position,cũng xin nói luôn với các bạn rằng hai giá trị thông dụng nhất là relative và absolute,những nhầm lẫn có thể xảy ra nhiều nhất với hai giá trị này,vậy cho nên những câu hỏi sau bắt buộc các bạn phải trả lời với mục đích là kiểm tra xem các bạn đã thực sự hiểu chúng hay chưa.Trong quá trình nghiên cửu bài tập, nếu có chỗ nào vướng mắc thì xin hãy quay lại xem những lý thuyết cơ bản ở trên,xem kĩ từng dòng, từng chữ bạn nhé. Bây giờ tôi sẽ cho các bạn đoạn code HTML như sau : chtml > <head> <title></tỉtle> <style type="text/css"> body ị #ngoai { height: 150px; width:150px; background-color: #FF99