absolute relative fixed position static inherit
STATIC
Là giá trị mặc định của thuộc tính position
Mỗi thành phần được đặt sau thành phần khác theo dòng chảy trang
Không xảy ra hiện tượng chồng chéo giữa nhiều thành phần
Không cần thiết phải sử dụng các yếu tố căn chỉnh tọa độ: top, left, right, bottom
Bài 4 - Định vị trí thẻ
Là giá trị mặc định của thuộc tính position
Mỗi thành phần được đặt sau thành phần khác theo dòng chảy trang
Không xảy ra hiện tượng chồng chéo giữa nhiều thành phần
Không cần thiết phải sử dụng các yếu tố căn chỉnh tọa độ: top, left, right, bottom
STATIC
CSS:
p#specialpara {color:red; background:#EEE; position:static}
XHTML:
<p id="specialpara">Đây là đoạn thứ ba của ví dụ về định vị. Đoạn này có một ID để ta có thể thay đổi giá trị vị trí của nó mà không ảnh hưởng tới các đoạn khác.Mục đích của ví dụ này là thể hiện cho bạn thấy sự khác biệt giữa bốn giá trị định vị: static, relative, absolute và fixed. </p>
ABSOLUTE
Định vị hộp theo tọa độ tuyệt đối, thay đổi vị trí theo các thuộc tính: Top Left Right Bottom Có thể xếp chồng đè lên các hộp khác Không phụ thuộc vào margin, float
Bài 4 - Định vị trí thẻ
Định vị hộp theo tọa độ tuyệt đối, thay đổi vị trí theo các thuộc tính: Top Left Right Bottom Có thể xếp chồng đè lên các hộp khác Không phụ thuộc vào margin, float
ABSOLUTE
CSS:
p#specialpara {position:absolute; top:25px; left:30px; color:red; background:#EEE;}
XHTML:
<p id="specialpara">Đây là đoạn thứ ba của ví dụ về định vị. Đoạn này có một ID để ta có thể thay đổi giá trị vị trí của nó mà không ảnh hưởng tới các đoạn khác.Mục đích của ví dụ này là thể hiện cho bạn thấy sự khác biệt giữa bốn giá trị định vị: static, relative, absolute và fixed. </p>
RELATIVE
Định vị tương đối so với hộp ngữ cảnh của nó Kết hợp căn chỉnh tọa độ với:
Top Left Right Bottom
Có thể kết hợp với margin, padding để căn chỉnh không xảy ra hiện tượng chồng chéo
Bài 4 - Định vị trí thẻ
Định vị tương đối so với hộp ngữ cảnh của nó Kết hợp căn chỉnh tọa độ với:
Top Left Right Bottom
Có thể kết hợp với margin, padding để căn chỉnh không xảy ra hiện tượng chồng chéo
RELATIVE
CSS:
p#specialpara {position:relative; top:25px; left:30px; color:red; background:#EEE;}
XHTML:
<p id="specialpara">Đây là đoạn thứ ba của ví dụ về định vị. Đoạn này có một ID để ta có thể thay đổi giá trị vị trí của nó mà không ảnh hưởng tới các đoạn khác.Mục đích của ví dụ này là thể hiện cho bạn thấy sự khác biệt giữa bốn giá trị định vị: static, relative, absolute và fixed. </p>