Cách sử dụng định vị tuyệt đối cho HTML5 và CSS3 Lập trình

Hãy bắt đầu cuộc phiêu lưu định vị tuyệt đối bằng cách xem xét cơ chế bố trí mặc định. Ở đây, bạn có thể thấy một trang HTML5 với hai đoạn văn trên đó. Bạn có thể sử dụng CSS để cung cấp cho mỗi đoạn màu khác và để đặt chiều cao và chiều rộng cụ thể. Định vị được để lại cho trình quản lý bố cục mặc định, đặt vị trí thứ hai (màu đen) bên dưới màu đầu tiên (màu xanh).

Làm thế nào để thiết lập HTML

Các mã là unsurprising:

hộp. html #blueBox {background-color: blue; chiều rộng: 100px; chiều cao: 100px;} #blackBox {background-color: black; chiều rộng: 100px; chiều cao: 100px;}

Nếu bạn không cung cấp thêm hướng dẫn, các đoạn văn (như các phần tử ở cấp độ khối khác) có xu hướng cung cấp các kết quả vận chuyển trước và sau chúng, xếp chồng lên nhau. Các kỹ thuật bố trí mặc định đảm bảo rằng không có gì trùng lặp.

Làm thế nào để thêm nguyên tắc vị trí

Kiểm tra cái gì đó mới: Đoạn đang chồng chéo nhau!

Thành tích này được thực hiện thông qua một số thuộc tính CSS mới:

absPosition. html #blueBox {background-color: blue; chiều rộng: 100px; chiều cao: 100px; vị trí: tuyệt đối; còn lại: 0px; đầu: 0px; lề: 0px;} #blackBox {background-color: màu đen; chiều rộng: 100px; chiều cao: 100px; vị trí: tuyệt đối; còn lại: 50px; trên cùng: 50px; lề: 0px;}

Vì vậy, tại sao bạn quan tâm nếu các hộp chồng chéo? Vâng, bạn có thể không quan tâm, nhưng phần thú vị là: Bạn có thể kiểm soát chính xác hơn nhiều nơi các phần tử sống và kích thước chúng là gì. Bạn thậm chí có thể ghi đè lên xu hướng bình thường của trình duyệt để giữ cho các phần tử chồng chéo lên, cho phép bạn lựa chọn thú vị.

Làm thế nào để thực hiện công việc định vị tuyệt đối

Một vài phần mới của CSS cho phép điều khiển trực tiếp hơn về kích thước và vị trí của các phần tử này. Dưới đây là CSS cho một trong các hộp:

#blueBox {background-color: blue; chiều rộng: 100px; chiều cao: 100px; vị trí: tuyệt đối; còn lại: 0px; đầu: 0px; margin: 0px;}

1. Đặt thuộc tính position thành absolute.

   Vị trí tuyệt đối có thể được sử dụng để xác định chính xác (nhiều hơn hoặc ít hơn) vị trí của phần tử sẽ được đặt trên màn hình:

   vị trí: tuyệt đối;
   

2. Chỉ định vị trí trái trong CSS.

   Sau khi bạn xác định rằng một phần tử sẽ có vị trí tuyệt đối, nó sẽ bị xóa khỏi dòng thông thường, do đó bạn có nghĩa vụ phải sửa vị trí của nó. Thuộc tính còn lại xác định vị trí cạnh bên trái của phần tử. Điều này có thể được chỉ định với bất kỳ đơn vị đo lường nào, nhưng thường được đo bằng các điểm ảnh:

   còn lại: 0px;
   

3. Xác định vị trí hàng đầu bằng CSS.

   Thuộc tính cho biết phần đầu của phần tử sẽ đi tới đâu. Một lần nữa, điều này thường được xác định bằng các điểm ảnh:

   trên cùng: 0px;
   

4. Sử dụng thuộc tính chiều cao và chiều rộng để xác định kích thước.

   Thông thường, khi bạn chỉ định vị trí, bạn cũng muốn xác định kích thước:

   chiều rộng: 100px; chiều cao: 100px;
   

5. Đặt lề xuống 0.

   Khi bạn sử dụng định vị tuyệt đối, bạn đang thực hiện khá kiểm soát. Bởi vì các trình duyệt không xử lý lề như nhau, bạn nên đặt lề xuống 0 và kiểm soát khoảng cách giữa các phần tử bằng tay:

   lề: 0px;
   

Nói chung, bạn chỉ sử dụng vị trí tuyệt đối trên các phần tử có tên, thay vì các lớp hoặc các kiểu phần tử chung. Ví dụ: bạn sẽ không muốn tất cả các đoạn văn trên một trang có cùng kích thước và vị trí, hoặc bạn không thể nhìn thấy tất cả. Định vị tuyệt đối chỉ hoạt động trên một phần tử tại một thời điểm.